CODEWITHSUNDEEP
angularjs
user2734550
user2734550

Reputation: 962

Angularjs Sharing Data between Controllers using factory

I am following YouTube's tutorial for Sharing Data between Controllers. For some reason, the two inputs don't return shared data(not bind-able). Can anyone let me know what is wrong in my code? 

 <!DOCTYPE html>
    <html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="/css/app.css?2">
        <script src="/bower-foundation/js/vendor/modernizr.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?2"></script>
        <!-- angularjs -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);

            myApp.factory('Data', function(){
                return {msg:"I am data from a service"}
            })

            function firstctrl($scope, Data) { 
                $scope.data = Data;
            }
            function secondctrl($scope, Data) {
                $scope.data = Data;
            }
        </script>
    </head>
    <body ng-app="myApp">


        <div ng-controller="firstctrl">
            <input type="text" ng-model="data.msg">
            <h1>{{data.msg}}</h1>
        </div>


        <div ng-controller="secondctrl">
            <input type="text" ng-model="data.msg">
            <h1>{{data.msg}}</h1>
        </div>


    <!-- javascript -->
        <script src="/bower-foundation/js/foundation.min.js?3"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.11/fastclick.min.js?2"></script>
        <script src="/js/min/app.min.js?3"></script>
    </body>
    </html>

Upvotes: 1

Views: 1426

Answers (1)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

Its working fine, Take a look at this

Working Demo

HTML

<div ng-app='myApp'>
    <div ng-controller="firstctrl">
        <input type="text" ng-model="data.msg" />
         <h1>{{data.msg}}</h1>

    </div>
    <div ng-controller="secondctrl">
        <input type="text" ng-model="data.msg" />
         <h1>{{data.msg}}</h1>

    </div>
</div>

SCRIPT

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

myApp.factory('Data', function () {
    return {
        msg: "I am data from a service"
    };
})

function firstctrl($scope, Data) {
    $scope.data = Data;
}

function secondctrl($scope, Data) {
    $scope.data = Data;
}

Also take a look at this stuff

AngularJS - Sharing variables between controllers

Upvotes: 1

Related Questions