AngularJS Lifetime Management

Using $injector for lifetime management

by Jeremy Likness

HTML

<div ng-app='myApp'>
    <div>Count: {{count}}</div>
    <button ng-click="update()">Update</button>
    <div>Counter 2: {{count2}}</div>
    <button ng-click="update2()">Update</button>
</div>

JavaScript

(function (app) {
    
    function Counter ($log) {
        $log.log('Counter created.');
    }
    
    angular.extend(Counter.prototype, {
        count: 0,
        increment: function () {
            this.count += 1;
            return this.count;
        }
    });
    
    Counter.$inject = ['$log'];
    
    app.service('counter', Counter); 
    
    app.run(['$rootScope', 'counter', '$injector', function (rs, c, i) {
        rs.count = c.count;
        rs.update = c.increment;
        rs.update2 = function () {
            var c = i.instantiate(Counter);
            rs.count2 = c.count;
            rs.update2 = function () {
                c.increment();
                rs.count2 = c.count;
            };
        };
    }]);
})(angular.module('myApp', []));