scope.js

main.js // simple configuration, with jquery require.config({

baseUrl: 'scripts',
paths: {
    jquery: 'vendor/jquery',
    angular: 'vendor/angular',
    restaurant:'michael/restaurant',
    client:'michael/client',
    dishes:'michael/dishes',
    till:'michael/till',
    scopeA:'michael/scopeA',
    scopeB:'michael/scopeB'
},
shim: {
	angular: {
		deps: ['jquery'],
		exports: 'angular'
	}
}

});

// entry point: let's open the restaurant //require(['angular','restaurant','till'], function(angular,restaurant) { require(['angular','scopeA','scopeB'], function(angular,scopeA,scopeB) { 'use strict';

angular.element(document).ready(function() {
    //angular.bootstrap(document, ['rest','till']);
    angular.bootstrap(document, ['scopeA','scopeB']);
});

});

scopeA.js define("scopeA",['angular'],function(angular){

   angular.module("scopeA",[]).directive("superMan",function(){
       return{
           restrict: 'E',
           replace: true,
           scope: {},
           template:"<div><button ng-click='changeUser()'>changeUser</button>{{username}}<batman></batman><fuckman></fuckman></div>",
           controller:function($scope){
               $scope.username = "superman";
               $scope.changeUser = function(){
                   console.log("scopeA changeUser is click");
                   $scope.username = "superman is click";
               }
           }

       }

   })

    return angular.module("scopeA");

})

scopeB.js define("scopeB",['angular'],function(angular){

   angular.module("scopeB",[]).directive("batman",function(){
       return{
           restrict: 'E',
           replace: true,
           scope: false,
           template:"<div><button ng-click='changeUser()'>changeUser</button>scopeB batman is {{username}}</div>",
           controller:function($scope){
               //$scope.username = "superman";
               $scope.changeUser = function(){
                   console.log("scopeB changeUser is click");
                   $scope.username = "batman";
               }

           }

       }

   })

    return angular.module("scopeB");

})

change scopeB.js if(scope:false) ------------ parent and children share the same scope and the children will overwrite parent's variable

if(scope:true) -------------children inherit from parent and children will not overwrite the parent's variable

if(scope:{}) ----------------isolated!!!