¿Por qué el enfoque en el cuadro de texto no se establece dentro de un modo de inicio de Twitter (ventana emergente) por AngularJS?

He estado intentando implementar lo que se sugiere aquí y otra solución similar¿Cómo establecer el enfoque en el campo de entrada?

PLUNKER Mi código con autofocus no funciona.

HTML

  <body ng-controller='userNameController'>
  <button class="btn" id="enterUsernameBtn" href="#userNameModal" role="button" class="btn" data-toggle="modal" title="Enter Username" 
   ng-click="focusInput=true">Enter Username</button>


   <!-- UserName Modal -->
    <div id="userNameModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userNameModalLabel"
         aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="userNameModalLabel">Enter your username</h3>
        </div>


        <div class="modal-body">
            <div class="input-append">
                <input class="pull-left" id="userIdTextBox" type="text"
                ng-model="userName1" ng-minlength="1" ng-trim="true" focus-me="focusInput"/>
            </div>
        </div>


        <div class="modal-footer">
            <button class="btn" data-dismiss="{{whatToDismiss}}" aria-hidden="true" ng-click="submitUserName()">Submit</button>
        </div>
        </div>

  </body>

JavaScript

var app = angular.module('abcApp',[]);

app.directive('focusMe', function($timeout) {
    return {
        scope: { trigger: '@focusMe' },
        link: function(scope, element) {
            scope.$watch('trigger', function(value) {
                if(value === "true") {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});


app.controller('userNameController',function ($scope)
{
  $scope.whatToDismiss=''; // workaround not to close the modal if it is an invalid input
  $scope.focusInput=false;

  $scope.submitUserName= function ()
  {    
    if($scope.userName1===undefined || $scope.userName1==="")
      {
          alert("Invalid Input");
          return;
      }

    alert("username entered"+$scope.userName1);  
    $scope.whatToDismiss='modal';

  }
});  

Ninguna solución me funciona. De alguna manera me enfoco en establecer un cuadro de texto cada vez que se abre el modal, pero luegono más obtener valor deuserName1 medianteng-model. Después de implementarfocusMe directivauserName1 Siempre está indefinido.

Editar

Voy a probar esto¿Puedo usar ng-model con alcance aislado?

Porque pareceng-model no funcionará para la solución anterior

Mientras tanto, cualquiera viene con respuesta a mi pregunta."Cómo configurar el enfoque automático en el cuadro de texto dentro de la modalidad de arranque de twitter y poder obtener el valor ingresado en ese cuadro de texto a través del modelo ng" por favor comparte.

Respuestas a la pregunta(4)

Su respuesta a la pregunta