var app = angular.module('MyApp', ['ui.bootstrap']);
var ModalController = function ($scope) {
$scope.open = function () {
$scope.isOpen = true;
};
$scope.close = function () {
$scope.isOpen = false;
};
};
app.directive('focusMe', function($timeout, $parse) {
return {
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
element.bind('blur', function() {
scope.$apply(model.assign(scope, false));
})
}
};
});
<div ng-controller="ModalController">
<button class="btn" ng-click="open()">Click to Open Modal</button>
<div modal="isOpen" close="close()">
<div class="modal-header">
<h4>Modal</h4>
</div>
<div class="modal-body">
Name: <input type="text" focus-me="isOpen">
</div>
<div class="modal-footer">
<button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
</div>
</div>
</div>
External resources loaded into this fiddle: