Tuesday, 2 September 2014

AngularJS work with multiple controller

<!DOCTYPE html>
<html>
<head>
<script
       src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body ng-app="myApp">

       <h2>-----myCtrl1-----</h2>
       <div ng-controller="myCtrl1">I am {{ firstName + " " + lastName
              }}</div>
       <h2>-----myCtrl2-----</h2>
       <div ng-controller="myCtrl2">I am {{ firstName + " " + lastName
              }}</div>
       <script>
              var app = angular.module("myApp", []);
              app.controller("myCtrl1", function($scope) {
                     $scope.firstName = "Moin";
                     $scope.lastName = "Master";
              });
              app.controller("myCtrl2", function($scope) {
                     $scope.firstName = "Neamat";
                     $scope.lastName = "Master";
              });
       </script>

</body>
</html>


_____________________________________________________________________________________

define ng-app is in body than and than you will get both controller in page body. If you define ng-app for some particular div than both controller my visible to that div only   

_____________________________________________________________________________________
output





No comments:

Post a Comment