Common filter for two different routes

Question

var app = angular.module("myApp", ['ngRoute', 'ngSanitize']);

app.controller('landingPageController', function($scope) {
  $scope.countries = [{
    name: "India",
    Id: "1"
  }, {
    name: "Nepal",
    Id: '2'
  }];
});

I have same filter criteria on two diff. pages in angular, So I have used single controller with 2 routes, and two diff. html for filter part. I need if i select any country on home page, the same selection should be reflected to the about page(instead of again select same country) . I mean it should be common filter across 2 page not individual.

Here is url: http://plnkr.co/edit/VMYYBDy4doWCzUa4d6Uq?p=preview

need help to sort it out...

Answer 1

You can share data between different controllers (or different instances of same controller) using e.g. services. So in your scotchApp (sounds tasty, BTW!) you could have something like

scotchApp.service('countryService', function() {
  var current;

  return {
    // set selected country
    set: function(country) {
      current = country;
      console.log('set', current);
    },
    // get selected country
    get: function() {
      console.log('get', current);
      return current;
    }
  };
}); 

And your mainController as

scotchApp.controller('mainController', function($scope, countryService) {
  $scope.countries = [{
    name: 'India',
    id: 1 // note the property casing here
  },{
    name: 'Nepal',
    id: 2
  }];

  // get selected country      
  $scope.selectedCountry = countryService.get();

  // set selected country
  $scope.set = function(country) {
    countryService.set(country);
  };
});

And the template for your routes

<div>
  <select ng-options="country.name for country in countries track by country.id" 
          ng-model="selectedCountry"
          ng-change="set(selectedCountry)">
    <option value="">Select country</option>
  </select>
</div>

That should do it.