Using models in Angular

using services to keep your data and business logic. stateful implementation. author: Mayank Dixit

by Mayank Dixit

HTML

<div ng-controller='mainCtrl'>
    <input type='text' ng-model='newData'/>
    <button ng-click='setData()'>Set It</button>
    <button ng-click='getData()'>Get It</button>
    Data is: {{data}}
</div>
<div ng-controller='secCtrl'>
    <input type='text' ng-model='newData'/>
    <button ng-click='setData()'>Set It</button>
    <button ng-click='getData()'>Get It</button>
    Data is: {{data}}
</div>

JavaScript

angular.module('myApp', []).
service('stepSvc', function($rootScope){
    var data = "my name is mayank!!!";
    this.data = data;
    this.setData = function(reqData){
        this.data = reqData;
        $rootScope.$broadcast('xyz::dataUpdated', data);
    }
    this.getData = function(){
        return this.data;
    }
}).
controller('mainCtrl', function($scope, stepSvc){
    $scope.data = "mainCtrl";
    $scope.getData = function(){
        console.log(stepSvc.getData())
    }
    $scope.setData = function(){
        stepSvc.setData($scope.newData);
    }
    $scope.$on('xyz::dataUpdated', function(event){
       $scope.data =  stepSvc.data;
    });
}).
controller('secCtrl', function($scope, stepSvc){
    $scope.data = "seCtrl";
    $scope.getData = function(){
        console.log(stepSvc.getData())
    }
    $scope.setData = function(){
        stepSvc.setData($scope.newData);
    }
    $scope.$on('xyz::dataUpdated', function(event){
       $scope.data =  stepSvc.data;
    });
});