Passing data to angular app

by Florian Bar

HTML

<div ng-app="myApp" ng-controller="MyController">
    
    <h3>People</h3>
    <ul>
        <li ng-repeat="person in people">
            {{ person.name + ' ' + person.sname }}
        </li>
    </ul>
    
    <h3>Roles</h3>
    <ul>
        <li ng-repeat="role in roles">
            <span href="#" ng-click="removeRole($index)">
                {{ role }}
            </span>
        </li>
    </ul>
    
</div>

JavaScript

window.myApp = angular.module('myApp', []);

myApp.controller('MyController', ['$scope', 'dataModel', function($scope, dataModel) {
    var _data = dataModel;
    
    $scope.people = _data.people;
    $scope.roles = _data.roles;
    
    $scope.removeRole = function ($index) {
    	$scope.roles.splice($index, 1); 
    };
}]);

/* PHP example:
myApp.value('dataModel', <?php echo json_encode($data); ?>); */

myApp.value('dataModel', { 
    people: [{ name: 'Tim', sname: 'Burns' }, { name: 'John', sname: 'Doe' }],
    roles: ['Office Admin', 'Developer', 'Designer']
});