Angular Bootstrap Example

by Aaronias

HTML

<!-- This Shows that a single ng-app can be used, but all subsequent ng-app directives must be 
     bootstrapped manually into their own HTML element
 -->
<div ng-app="app1" > 
    <span ng-controller="ctrl">
        <input ng-model="one">{{one}}
    </span>
        <div dir update="update()"> </div>

</div>
<div id="app2"> 
    <span ng-controller="ctrl">
        <input ng-model="two">{{two}}
    </span>

</div>

JavaScript

var app1 = angular.module('app1', []);
//console.log(app1);
app1.controller('ctrl', function ($scope) {
    $scope.one = '1';
    $scope.update = function(){
        console.log("updated");    
    }
});

app1.directive("dir", function() {
    return {
        scope:{
            update:"&"   
        }
        template:'<input type="text" ng-model="value"> <div class="button" ng-click="dial()">Update</div>'
    }
}
//angular.module('app1',[]).controller('ctrl', function($scope) {
//$scope.one = '1';
//}); 

angular.module('app2', []).controller('ctrl', function ($scope) {
    $scope.two = '2';
});


//angular.bootstrap(document.getElementById('app1'), ['app1']);
angular.bootstrap(document.getElementById('app2'), ['app2']);