Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <body ng-app='myModule'>
    <div ng-controller="oneCtrl">
      a: <input ng-model="aModel.a">
      b: <input ng-model="aModel.b">
      c: {{ aModel.c }}
    </div>
    
    <div ng-controller="twoCtrl">
      In another controller, c is also {{ anotherModel.c }}
    </div>
  
</body>
</html>
​
 
var myModule = angular.module('myModule', []);
​
//A service providing a model available to multiple controllers
myModule.factory('aModel', function($rootScope) {
  var myModel = {
    a: 10,
    b: 10,
    c: null
  };
  
  //compute c from a and b
  calcC = function() {
    myModel.c = parseInt(myModel.a, 10) * parseInt(myModel.b, 10);
  };
  
  $rootScope.myModel = myModel;
  $rootScope.$watch('[myModel.a,myModel.b]', calcC);
    
  return myModel;
});
​
​
myModule.controller('oneCtrl', function($scope, aModel) {
  $scope.aModel = aModel;
});
​
myModule.controller('twoCtrl', function($scope, aModel) {
  $scope.anotherModel = aModel;
});
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers