AngularJS/UI - Focus input in dialogs

I used the standard autofocus attribute in my template, and declared a simple directive to make it work for elements that are created after page load (like dialogs in your case).

app.directive('autofocus', function () {
  return {
    restrict: 'A',
    link: function (scope, element) {
      element[0].focus();
    }
  };
});

Turns out that all you need is this if you use it together with the Angular-ui $dialog service:

app.directive('focusMe', function ($timeout) {    
    return {    
        link: function (scope, element, attrs, model) {                
            $timeout(function () {
                element[0].focus();
            });
        }
    };
});

html:

  <input type="text" focus-me >

as stated, this is for Angular-UI $dialog service only.

See it live here: http://strengthtracker.apphb.com (click login or register to bring up the dialogs)

You are right, I've shown demos on how you can call jQuery's native jQuery.fn.focus() method on a DOM element, as that's all ui-jq really does. The trick is getting it to fire multiple times, and at the right time.

ui-jq already executes the method for you inside a $timeout, however by default it only fires once, when the DOM element is created. In order to make ui-jq fire multiple times, simply add ui-refresh="someExpression" and use an expression that you know will change every single time the modal opens. It's alright if it refires when the modal is closed too, .focus() will do nothing if the DOM element is not visible.

So, for the ui-bootstrap modal, simply put the same expression you're using inside the modal="someExpression" and you should be set.