AngularJS: attrs.$observe not firing after the first time - angularjs

Question

jsFiddle here
In the fiddle, if you click on the submit button for the first time, notice that the <input> correctly gets focused on. On subsequent clicks, the focus isn't set any longer.
I noticed that the $observe callback isn't getting triggered when submit() changes isFocused, so I added a blur listener to explicitly reset the variable but that didn't help either.
How do I make the focus stick on submit?
Edit: Final working fiddle. Using $watch instead because I want it to work with arbitrary expressions

Answer 1

If you watch the element you'll notice that when the blur callback is fired the focus-on attribute isn't set to false. The reason for this is that the blur function is outside angular's scope and so it isn't aware of changes you make inside it.
To make angular aware of the change you need wrap any changes inside a call to $apply
element.bind('blur', function () {
scope.$apply(function() {
scope.isFocused = false;
console.log('blur');
});
});
http://jsfiddle.net/6vfGm/7/

Answer 2

I don't think you can observe the focusOn attribute because it doesn't really exist as an attribute of the directive. When you do <input focus-on='{{isFocused}}' /> the focus-on is actually your directive name.
Try this instead:
HTML
<div ng-app='foo'>
<form ng-controller='FormCtrl' ng-submit='submit()'>
<input focus-on focused='isFocused' />
<button>Submit</button>
</form>
</div>
Javascript
app.directive('focusOn', function () {
return {
scope: { focused: '=' },
link: function(scope, element) {
scope.$watch('focused', function (newValue) {
console.log('$watch', newValue)
if (newValue) {
element[0].focus();
}
});
element.bind('blur', function () {
scope.focused = false;
scope.$apply(); // required so that the scope is updated correctly.
console.log('blur');
});
}
};
});
app.controller('FormCtrl', function ($scope) {
$scope.submit = function () {
$scope.isFocused = true;
console.log('submit');
};
});
I created a focused attribute to bind the isFocused property to the directive scope (I could have named it focusOn, but I guess it would be weird to have <input type="text" focus-on focus-on="isFocused" />).
Here's your updated jsFiddle.
Update: I changed the attribute name from ng-model to focused so it makes more sense.