Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
  <script src="
   https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
  </script>
</head>
<body ng-app="testApp">
<h1>AngularJS Scope Multiple Controllers.</h1>
    <div ng-controller="jaiController">
        Controller Name: {{controllerName}}<br/>
        Message: {{message}}<br/>
        <span ng-bind="message"></span> <br/>
        <input type="text" ng-model="message"/> 
    </div>
    <div ng-controller="vivekController">
        Controller Name: {{controllerName}}<br/>
        Message: {{message}}<br/>
        <span ng-bind="message"></span> <br/>
        <input type="text" ng-model="message"/> 
    </div>
    <script>
        var ngApp = angular.module('testApp', []);
​
        ngApp.controller('jaiController', function ($scope) {
            $scope.controllerName = "jaiController"; 
            $scope.message = "Hello Jai!";        
        });
      
       ngApp.controller('vivekController', function ($scope) {
            $scope.controllerName = "vivekController";
            $scope.message = "Hello Vivek!";        
        });
    </script>
</body>
</html>
Output

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

Dismiss x