title: Call function from another controller Angularjs
body: <p><strong>This is my simple controller :</strong></p>
  
  <pre><code>XApp.controller('LoadCountriesController', function ($scope, GetAllCountries, $http, $location) {
      console.log('Step 3');
      var Obj = new Object();
      Obj.SPNAME = "GetAllCountry";
  
      $scope.countryData = GetAllCountries.query({ parameters: Obj }, function () {
          $scope.countryList = $scope.countryData;
          console.log(JSON.stringify($scope.countryList));
      });
  
      $scope.$on('bindmsDropDown', function (ngRepeatFinishedEvent) {
          var CountryCode = "in";
          //Check whether the cookie is already set
          var cookiename = 'currency';
          if ($.cookie(cookiename)) {
              $("#countries").val($.cookie(cookiename));
              CountryCode = $.cookie(cookiename);
          }
          else {
              $("#countries").val('in');
              $.cookie('currency', $("#countries").val(), { expires: 365, path: '/' });
              CountryCode = $("#countries").val();
          }
  
          $("#countries").msDropdown();
      });
  });
  
  
  XApp.factory('GetAllCountries', function ($resource) {
      console.log('Step 4');
      return $resource('api/master/:object?type=json', {}, { 'query': { method: 'GET', isArray: true } });
  });
  </code></pre>
  
  <p>I am using the above controller to populate a drop down list :</p>
  
  <pre><code>&lt;div class="CountryDDL" data-ng-controller="LoadCountriesController"&gt;
  &lt;select name="countries" id="countries" style="width: 84px; display: block;"&gt;
  &lt;option on-finish-render="bindmsDropDown" data-ng-repeat="country in countryList" value="{{ country.CountryCode }}"   data-image="content/themes/msdropdown/icons/blank.gif" data-imagecss="flag {{ country.CountryCode }}" data-title="{{ country.CurrencyName }}" &gt;{{ country.CurrencyCode }}&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want to call a function <code>(loadData)</code> from another controller <code>(ProductsController)</code> on the <code>onchange</code> event of the select.</p>
  
  <pre><code>var ProductsController = function ($scope, GetProductsForIndex, $http, $location) {
      console.log('Step 1');
      $scope.products = [];
      $scope.busy = false;
      var indexPageNo = 0;
      $scope.loadData = function () {
          if ($scope.busy) return;
          $scope.busy = true;
  
          indexPageNo += 1;
          var Obj = new Object();
  
          Obj.PAGEINDEX = indexPageNo;
          Obj.PAGESIZE = 20;
          Obj.SPNAME = "index_get_products";
          Obj.PAGECOUNT = null;
          Obj.COUNTRYCODE = 'in'
          $scope.data = GetProductsForIndex.query({ parameters: Obj }, function () {
              console.log(JSON.stringify($scope.data));
              for (var i = 0; i &lt; $scope.data.length ; i++) {
                  $scope.products.push($scope.data[i]);
              }
              $scope.busy = false;
          });
      }
  
      //$scope.loadData();
      $scope.$on('bindWookmarkHandler', function (ngRepeatFinishedEvent) {
          console.log("done");
          if (indexPageNo === 1) {
              executeOnFirstLoad();
          } else {
              var handler = null;
              var options = {
                  autoResize: true, // This will auto-update the layout when the browser window is resized.
                  container: $('#main'), // Optional, used for some extra CSS styling
                  offset: 17, // Optional, the distance between grid items
                  itemWidth: 225 // Optional, the width of a grid item 
              };
  
              if (handler) handler.wookmarkClear();
              // Create a new layout handler.
              handler = $('#tiles li');
              handler.wookmark(options);
          }
  
      });
  
  };
  
  
  XApp.factory('GetProductsForIndex', function ($resource) {
      console.log('Step 2');
      return $resource('api/index/:object?type=json', {}, { 'query': { method: 'GET', isArray: true } });
  });
  </code></pre>