AngularJS Example

for http://stepansuvorov.com/blog/

by zarya

HTML

<div ng-controller="userController">
<div ng-bind="name.first"></div>
  {{ name.first }} {{ name.last }}
</div>
<button ng-click="change(name)">click</button>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

JavaScript

var app = angular.module('foo', [])

app.controller('userController', function ($scope, nameStorage) {
    $scope.name = nameStorage.name;
    $scope.change = nameStorage.change;
    
    alert($scope.name.first + ' ' + $scope.name.last);
    setTimeout(function () {
        alert($scope.name.first + ' ' + $scope.name.last);
    }, 1000);
})
    .service('nameStorage', function ($rootScope) {
    var self = this;
    
    self.change = function(name){
    	name.last = 'blue';
    }
    self.name = {
        first: 'Alice',
        last: 'Green'
    };
    
    //just to inimitate sevice change    
    
    setTimeout(function () {
        self.name.first = 'Bob';
    }, 500);
});