javascript - Updating $scope variables across controllers in AngularJS -

i'm new angular, apologies in advance predict simple question. i'm trying create comments system articles. have 2 angular controllers, 1 load comments when page loaded, , submit new comment server. these work fine, in success() method i'd update displayed comments show new comment. however, code @ present doesn't work , no method i've tried seems fix it. please?!

i know different $scope variables, none of documentation i've read seems make clear.

article.js

// create app var articleapp = angular.module('articleapp', ['btford.markdown', 'ngsanitize']); // create controller articleapp.controller('displaycommentsctrl', function ($scope, $http) {     $scope.loadcomments =   function () {         $http.get(routing.generate('article_comments', { id: window.articleid })).success(function (data) {             $scope.comments = data.comments;         });     };     $scope.loadcomments(); });  articleapp.controller('submitcommentctrl', function ($scope, $http, $route) {     $scope.loadcomments = function () {         $http.get(routing.generate('article_comments', { id: window.articleid })).success(function (data) {             $scope.comments = data.comments;         });     };     $scope.loadcomments();      $scope.formdata = {         'comment':{             'save'      :   'save',             'comment'   :   '',             '_token'    :   $('#comment__token').val()         }     };     $scope.processform = function ($route) {         $http({             method  :   'post',             url     :   routing.generate('article_new_comment', { id: window.articleid }),             data    :   $.param($scope.formdata),             headers :   {                 'content-type': 'application/x-www-form-urlencoded'             }         })         .success(function (data, $route) {             $route.reload();         });     }; }); 

article.html.twig

<div class="col-md-12">          <div class="commentformcontainer" ng-controller="submitcommentctrl">         {% verbatim %}         <p>{{ formdata.comment.comment }} / {{ formdata.comment._token }}</p>         {% endverbatim %}         <!--{{ form_start(commentform, { 'attr': { 'id': 'commentform', 'ng-submit':'processform()' }}) }} -->         <form name="comment" id="commentform" ng-submit="processform()">             {{ form_errors(commentform) }}             {{ form_row(commentform.comment, { 'attr': { 'ng-model': 'formdata.comment.comment' } }) }}             {{ form_widget(commentform._token) }}             {{ form_end(commentform) }}     </div>      {% verbatim %}     <div class="articlecommentcontainer"  ng-controller="displaycommentsctrl">         <div ng-repeat="comment in comments | orderby: '-time'">             <div class="articlecommentcomment" ng-bind-html="comment.commenthtml">                           </div>             <div class="articlecommentdetails">                 <p>[{{ comment.creator }} @ {{ comment.time|date:'eee d mmm, h.mm a' }}]</p>             </div>         </div>     </div>     {% endverbatim %} </div> 

thanks commented me out. fixed using event broadcasting - although not quite solution i'd envisaged works quite nicely. i've put code below explain.

in nutshell...

whereas trying either reload 1 controller, displaycommentsctrl, controller, submitcommentctrl, or use method i'd defined in 1 controller in different controller, use angular event dispatcher in $http.success() of submitcommentctrl trigger event i'm watching in displaycommentsctrl. supply information needed display comment (which returned data argument in $http.success() argument event.

the method described above cuts out problem of scope. 2 controllers have totally different scopes, , methods i'd defined in 1 couldn't run in other, , changing value of scope variable in 1 didn't affect other. submitcommentctrl injected $rootscope, can use method $rootscope.$broadcast(streventname, mixeddata) broadcast child scopes. in displaycommentsctrl i'm listening method using $scope.$on(streventname, function (event, mixeddata) { // }).

hope answer helps. more information on scopes in angular, see here: https://docs.angularjs.org/guide/scope.

article.js

// create app var articleapp                          =   angular.module('articleapp', ['btford.markdown', 'ngsanitize', 'nganimate']);  // controller display comments articleapp.controller('displaycommentsctrl', function ($scope, $http) {   // load comments method   $scope.loadcomments                   =   function () {     $http.get(routing.generate('article_comments', { id: window.articleid })).success(function (data) {       $scope.comments                   =   data.comments;     });   };   $scope.loadcomments();    // in case there's new comment   $scope.$on('newcomment', function (event, newcomment) {     $scope.comments.push(newcomment);   });  });  // controller submit new comment articleapp.controller('submitcommentctrl', function ($scope, $rootscope, $http) {   $scope.loadcomments                   =   function () {     $http.get(routing.generate('article_comments', { id: window.articleid })).success(function (data) {       $scope.comments                   =   data.comments;     });   };   $scope.loadcomments();    $scope.formdata                       =   {     'comment':{       'save'        :   'save',       'comment' :   '',       '_token'  :   $('#comment__token').val()     }   };   $scope.processform                    =   function ($route) {     $http({       method    :   'post',       url       :   routing.generate('article_new_comment', { id: window.articleid }),       data  :   $.param($scope.formdata),       headers   :   {         'content-type': 'application/x-www-form-urlencoded'       }       })     .success(function (data) {       // add new comment below form       $rootscope.$broadcast('newcomment', data);       // empty form       $scope.formdata.comment.comment   =   '';     });   }; });