Here is the code snippet from my app.js file:
var countryApp = angular.module('countryApp', ['ngRoute']);
countryApp.controller('testController', ['$scope', '$http', '$location', function ($scope, $http, $location) {
$http({
url: 'countries.json',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data) {
$scope.details = data;
console.log("data---------->", $scope.details);
}).error(function (data) {
console.log("data error---------->", $scope.details);
})
}]);
countryApp.config(['$routeProvider', function ($routeProvider) {
//$httpProvider.interceptors.push('httpErrorInterceptor');
$routeProvider.when('/countrydetails', {
templateUrl: 'partials/country-detail.html',
//controller: 'testController',
}).otherwise({
redirectTo: '/countrylist',
templateUrl: 'partials/country-list.html',
controller: 'testController',
});
}])
countryApp.factory('testService', ['$scope', '$http', function ($scope, $http) {
return { }
}])
This is what I have in my countries-list.html file:
<h1>COUNTRIES</h1>
<select>
<option ng-repeat="country in details | orderBy:'name'">
<a>{{country.name}}</a>
</option>
</select>
<a href="#/countrydetails"><button >click</button></a>
I am trying to capture the country name on the next page when the button is clicked. To achieve this, I have a separate HTML page called country-details.html. How can I retrieve the country name in this HTML page?