Experimenting with AngularJS scope

by fschwiet

HTML

<div ng-controller='parent'>
        <a ng-click='parentAppend()' href='#'>append parent</a>
        <div ng-controller='child'>
            <a ng-click='childAppend()' href='#'>append child</a>
            <div ng-repeat='v in values'> {{v}} </div>
        </div>
        
        <div ng-controller='child'>
            <a ng-click='childAppend()' href='#'>append child</a>
            <div ng-repeat='v in values'> {{v}} </div>
        </div>        
    </div>

CSS

div {
    margin: 10px;
}

JavaScript

var module = angular.module('test', []);

    module.controller("parent", function($scope) {
        
        $scope.values = [1,2,3];
        
        $scope.parentAppend = function() {
            $scope.values.push("parent" + $scope.values.length);
        };
    });
    
    module.controller("child", function($scope) {
        
        $scope.childAppend = function() {
            $scope.values.push("child" + $scope.values.length);
        };
    });
    
    angular.bootstrap(document.querySelector('body'), ['test']);