Ввод данных в меню. Установка фокуса для элемента управления нажатием кнопки li

Question

In angular js.

Я хочу разрешить ввод данных пользователем в меню перед выбором действия. Когда меню открывает форму, я хочу установить фокус на элемент управления вводом, где пользователь будет вводить число.

Мой HTML имеет,

   <ul class="nav nav-pills command clear">
     <li class="dropdown">
       <button title='Goto step count' ng-click="gotostepcountsetfocus()" data-toggle="dropdown">Goto<b class="caret"></b></button>
       <ul class="dropdown-menu command clear">
         <li class="command clear">
           <form ng-submit='gotostepcount()' >
             <label>Step count :</label><br />
             <input id='stepcountid' type='number' ng-change='updatereruncommand()' ng-model='stepcount' name='stepcount'><br />
             <label>Rerun command</label>
             <input type="checkbox" disabled ng-model="reruncommand"><br />
             <input type='submit' value='Run' />
           </form>
         </li>
       </ul>
     </li>
   </ul>

Мой Javascript имеет ,

    $scope.gotostepcountsetfocus = function () {
        alert("Li clicked");
        var stepCountField = $document[0].getElementById('stepcountid');
        stepCountField.focus();
    };

Иногда я получаю окно с предупреждением, но фокус не устанавливается.

Может кто-нибудь объяснить, почему событие запускается в первый раз, но не при последующих попытках, если только нажата форма.

И, главным образом, почему фокус не установлен на элемент управления вводом номера.