angular-simple-focus

As you can see, an element with the simple-focus attribute gets focus when the page loads, and every time you set the value of the attribute to true.

When the element gets focus, it then sets the value to false so that other elements can get focus later.

$scope.thing: {{ thing === undefined ? 'undefined' : thing }}

Try it:

<button ng-click="thing = true">Focus</button>
<input type="text" simple-focus="thing" />

'use strict';
var app = angular.module('app', [ 'simple-focus' ]);

app.controller('MainCtrl', function () {
  // nothing needed here!
});

The element also gets value when it's created, and as you can see, the attribute value, while it is a property of scope doesn't have to be defined ahead of time.

Save yourself a lot of hassle by just setting it and forgetting it.

$scope.stuff.length: {{ stuff.length }}

Try it:

<button ng-click="stuff.push({})">Add Another Input</button>
<input ng-repeat="item in stuff" type="text" simple-focus="anyvalue" />

'use strict';
var app = angular.module('app', [ 'simple-focus' ]);

app.controller('MainCtrl', function ($scope) {
  $scope.stuff = [];
});

Check out the source for this page for more details. All we used was this for the main.js file: