Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <body>
    <p ng-controller="MainCtrl">{{aPerson.name}} - {{aPerson.country}}</p>
    <div ng-controller="SecondCtrl">
      {{aPerson.name}} - {{aPerson.country}}
      <button ng-click="updateIt()">Update it</button>
    </div>
  </body>
</html>
 
app = angular.module('app', []);
​
app.controller('MainCtrl', function($scope, personService) {
  $scope.aPerson = Person.getById(1);
});
​
app.controller('SecondCtrl', function($scope, personService) {
  $scope.aPerson = Person.getById(1);
  
  $scope.updateIt = function() {
    $scope.aPerson.update();
  };
});
​
// Our class
function Person( json ) {
  angular.extend(this, json);
}
​
Person.prototype = {
  update: function() {
    // Update it (With real code :P)
    this.name = "Dave";
    this.country = "Canada";
  }
};
​
Person.getById = function( id ) {
  // Do something to fetch a Person by the id
  return new Person({
    name: "Jesus",
    country: "Spain"
  });
};
​
// Our factory
app.factory('personService', function() {
  return {
    getById: Person.getById
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x