1

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>
Nidhish Krishnan
  • 20,593
  • 6
  • 63
  • 76
user2734550
  • 952
  • 1
  • 12
  • 35

1 Answers1

1

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

Community
  • 1
  • 1
Nidhish Krishnan
  • 20,593
  • 6
  • 63
  • 76
  • Weird, both Data are not returned when I update inputs. h1 only displays {{data.msg}} after compile. – user2734550 Jun 23 '14 at 20:33
  • Dont to see that Data value get printed within the text fields like as h1....and whenever you change the value its reflecting in all areas right – Nidhish Krishnan Jun 24 '14 at 02:00
  • Means when you change one text field value you dont want the other to get reflected.....can you please detail your requirement. ... – Nidhish Krishnan Jun 26 '14 at 01:42