How to reset value of scope data through multiple controller?

Question

I am new to angular js and just want to know how to reset scope of one controller from other controller.

I am having four different divs(controllers) having refresh button and in one main parent divs controller having dropdown selection.

-- with click on refresh button, dropdown change event works but if i click on refresh of particular divs then that div only not getting refresh on change event of dropdown.

var parentModule = angular.module("parentModule", []);



parentModule.factory('myService', function($http) {
  return {
    getDataForBox1: 
    function() 
    {

      var box1data = $http.get('/testurl/test/getAllProfilesForBox1').then(function(result) {return result.data;});return box1data;
    },
    getDataForBox2: 
    function() 
    { 
      console.log("getDataForBox2 called")
      var box2data = $http.get('/testurl/test/getAllProfilesForBox2').then(function(result) {return result.data;});return box2data;
    },
    getDataForBox3: 
    function() 
    {
      console.log("getDataForBox3 called")
      var box3data = $http.get('/testurl/test/getAllProfilesForBox3').then(function(result) {return result.data;});return box3data;
    },
    getDataForBox4: 
    function() 
    { 
      console.log("getDataForBox4 called")
      var box4data = $http.get('/testurl/test/getAllProfilesForBox4').then(function(result) {return result.data;});return box4data;
    }

  }
});

parentModule.controller('box1Controller', function($scope, myService) {
  $scope.go = function() {
    myService.getDataForBox1().then(function(profiles1) {
      .profiles1 = profiles1;
    });
  }
});

parentModule.controller('box2Controller', function($scope, myService) {
  $scope.go2 = function() {
    myService.getDataForBox2().then(function(profiles2) {
      $scope.profiles2 = profiles2;
    });
  }
});

parentModule.controller('box3Controller', function($scope, myService) {
  $scope.go3 = function() {
    myService.getDataForBox3().then(function(profiles3) {
      $scope.profiles3 = profiles3;
    });
  }
});

parentModule.controller('box4Controller', function($scope, myService) {
  $scope.go4 = function() {
    myService.getDataForBox4().then(function(profiles4) {
      $scope.profiles4 = profiles4;
    });
  }
});


parentModule.controller('ctrl', function($scope, myService) {

  $scope.changedValue = function() {
    myService.getDataForBox1().then(function(profiles1) {
      $scope.profiles1 = profiles1;
    });
    myService.getDataForBox1().then(function(profiles2) {
      $scope.profiles2 = profiles2;
    });

    taForBox1().then(function(profiles3) {
      $scope.profiles3 = profiles3;
    });

    myService.getDataForBox1().then(function(profiles4) {
      $scope.profiles4 = profiles4;
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="parentModule">
  <div style="width: 100%; display: table;" ng-controller="ctrl">
    <div style="display: table-row">
      <div style="display: table-cell; background-color: lightgreen"
           ng-controller="box1Controller">
        <b>Box - 1 </b>
        <table class="table">

          <tr ng-repeat="profile in profiles1">
            <td>{{profile.firstname}}</td>
            <!-- <td>{{profile.lastname}}</td> -->
            <td> Server Date {{profile.serverDate}}</td>
          </tr>
          <tr>
            <td colspan="2"></td>
          </tr>
        </table>

        <a ng-click='go()'>Refresh</a>
      </div>

      <div style="display: table-cell; background-color: lightblue"
           ng-controller="box2Controller">
        <b>Box - 2</b>
        <table class="table">

          <tr ng-repeat="profile in profiles2">
            <td>{{profile.firstname}}</td>
           </tr>

        </table>
        <a ng-click='go2()'>Refresh</a>
      </div>
      <div style="display: table-cell; background-color: lightgreen"
           ng-controller="box3Controller">
        <b>Box - 3 </b>
        <table class="table">

          <tr ng-repeat="profile in profiles3">
            <td>{{profile.firstname}}</td>
            <!-- <td>{{profile.lastname}}</td> -->
            <td>Server Date {{profile.serverDate}}</td>

          </tr>
        </table>
        <a ng-click='go3()'>Refresh</a>
      </div>
      <div style="display: table-cell; background-color: lightblue"
           ng-controller="box4Controller">
        <b>Box - 4</b>
        <table class="table">

          <tr ng-repeat="profile in profiles4">
            <td>{{profile.firstname}}</td>
            <!-- <td>{{profile.lastname}}</td> -->
            <td>Server Date {{profile.serverDate}}</td>
          </tr>
        </table>
        <a ng-click='go4()'>Refresh</a>
      </div>
      <br> <br>
    </div>

    <div align="center">
      <b>Refresh All Box :</b> <select ng-model="item" ng-change="changedValue()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      </select>
    </div>
  </div>
</div>

note : here i am making ajax call on refresh and drop down change event.

Have a snapshot of UI

I think there is problem of nested controller where parent controller is not having access to reset child controller scope.

does it working after you refresh complete page i mean data is changing after refreshing the page .. ? — mayank
– mayank, Commented Dec 6, 2015 at 3:53

Mosh Feu · Accepted Answer · 2015-12-06 07:00:29Z

Check this snippet. I have used date to identify refresh after clieck as your ajax can`t return data to me .. :)

var parentModule = angular.module("parentModule", []);
    parentModule.factory('myService', function ($http) {
        return {
            getDataForBox1:
                function () {
                    var box1data = $http.get('/testurl/test/getAllProfilesForBox1').then(function (result) { return result.data; }); return box1data;
                },
            getDataForBox2:
                function () {
                    console.log("getDataForBox2 called")
                    var box2data = $http.get('/testurl/test/getAllProfilesForBox2').then(function (result) { return result.data; }); return box2data;
                },
            getDataForBox3:
                function () {
                    console.log("getDataForBox3 called")
                    var box3data = $http.get('/testurl/test/getAllProfilesForBox3').then(function (result) { return result.data; }); return box3data;
                },
            getDataForBox4:
                function () {
                    console.log("getDataForBox4 called")
                    var box4data = $http.get('/testurl/test/getAllProfilesForBox4').then(function (result) { return result.data; }); return box4data;
                }
        }
    });
    parentModule.controller('box1Controller', function ($scope, myService) {
        $scope.go = function () {
            $scope.profiles1 = [new Date(), new Date(), new Date(), new Date(), new Date()];
            myService.getDataForBox1().then(function (profiles1) {
                $scope.profiles1 = profiles1;
            });
        }
    });
    parentModule.controller('box2Controller', function ($scope, myService) {
        function addDays(theDate, days) {
            return new Date(theDate.getTime() + days * 24 * 60 * 60 * 1000);
        }
        $scope.go2 = function () {
            $scope.profiles2 = [addDays(new Date, 2), addDays(new Date, 2), addDays(new Date, 2), addDays(new Date, 2)]
            myService.getDataForBox2().then(function (profiles2) {
                $scope.profiles2 = profiles2;
            });
        }
    });
    parentModule.controller('box3Controller', function ($scope, myService) {
        function addDays(theDate, days) {
            return new Date(theDate.getTime() + days * 24 * 60 * 60 * 1000);
        }
        $scope.go3 = function () {
            $scope.profiles3 = [addDays(new Date(), 3), addDays(new Date(), 3), addDays(new Date(), 3), addDays(new Date(), 3)];
            /*myService.getDataForBox3().then(function(profiles3) {
               $scope.profiles3 = profiles3;
            });*/
        }
    });
    parentModule.controller('box4Controller', function ($scope, myService) {
        function addDays(theDate, days) {
            return new Date(theDate.getTime() + days * 24 * 60 * 60 * 1000);
        }
        $scope.go4 = function () {
            $scope.profiles4 = [addDays(new Date(), 4), addDays(new Date(), 4), addDays(new Date(), 4), addDays(new Date(), 4)]
            myService.getDataForBox4().then(function (profiles4) {
                $scope.profiles4 = profiles4;
            });
        }
    });
    parentModule.controller('ctrl', function ($scope, myService) {
        $scope.changedValue = function () {
            myService.getDataForBox1().then(function (profiles1) {
                $scope.profiles1 = profiles1;
            });
            myService.getDataForBox1().then(function (profiles2) {
                $scope.profiles2 = profiles2;
            });
            myService.getDataForBox1().then(function (profiles3) {
                $scope.profiles3 = profiles3;
            });
            myService.getDataForBox1().then(function (profiles4) {
                $scope.profiles4 = profiles4;
            });
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="parentModule">
    <div style="width: 100%; display: table;" ng-controller="ctrl">
        <div style="display: table-row">
            <div style="display: table-cell; background-color: lightgreen"
                ng-controller="box1Controller">
                <b>Box - 1 </b>
                <table class="table">
                   <tr ng-repeat="profile in profiles1">
                        <td>{{profile}}</td>
                        <!-- <td>{{profile.lastname}}</td> -->
                        <td>Server Date {{profile.serverDate}}</td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                </table>
               <a ng-click='go()'>Refresh</a>
            </div>
           <div style="display: table-cell; background-color: lightblue"
                ng-controller="box2Controller">
                <b>Box - 2</b>
                <table class="table">
                   <tr ng-repeat="profile in profiles2">
                        <td>{{profile}}</td>
                        <!-- <td>{{profile.lastname}}</td> -->
                        <td>Server Date {{profile.serverDate}}</td>
                   </tr>
               </table>
                <a ng-click='go2()'>Refresh</a>
            </div>
            <div style="display: table-cell; background-color: lightgreen"
                ng-controller="box3Controller">
                <b>Box - 3 </b>
                <table class="table">
                   <tr ng-repeat="profile in profiles3">
                        <td>{{profile}}</td>
                        <!-- <td>{{profile.lastname}}</td> -->
                        <td>Server Date {{profile.serverDate}}</td>
                   </tr>
                </table>
                <a ng-click='go3()'>Refresh</a>
            </div>
            <div style="display: table-cell; background-color: lightblue"
                ng-controller="box4Controller">
                <b>Box - 4</b>
                <table class="table">
                   <tr ng-repeat="profile in profiles4">
                        <td>{{profile}}</td>
                        <!-- <td>{{profile.lastname}}</td> -->
                        <td>Server Date {{profile.serverDate}}</td>
                   </tr>
               </table>
                <a ng-click='go4()'>Refresh</a>
            </div>
           <br>
            <br>
        </div>
        <div align="center">
            <b>Refresh All Box :</b>
            <select
                ng-model="item"
                ng-change="changedValue()">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
    </div>
</div>

@mayyank thanx for your efforts but not able to identify your changes.Please tell me the only change part that you have done. and in your link change event is not working.
in my case both refresh click and dropdown change event working but once when i click on refresh of particular div then that div is not getting refresh on change event of dropdown selection.
@bajrangi i haven't done anything on change event i will edit it also,i have used Date instance to see the changes on refresh button of different boxes with days difference for example if i talk about box1 then i have simple new Date() in box 2 Date of after 2 days which chanegs after every refresh, coz i was not getting the ajax data from your url... please share your fiddle so that i can edit it

Collectives™ on Stack Overflow

How to reset value of scope data through multiple controller?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related