javascript - Send data one page to another pager according to ID in Angular JS -

i using mobile angular js ui frame work. new in angular js , want send data 1 page page city id. if user click on city data show according city.

home page:

html page:

  <div class="jumbtron scrollable-content text-center bg-color">    <div class="row">       <div class="bgimage">           <div class="bannercntnt">            <div class="hp-text-bnnr" style="color:white"> want delivery? <br>choose city </div> <br>               <div class="btn-group"  ng-controller="mycontroller">                    <button ui-turn-on='mydropdown' class='btn' ng-click="getdatafromserver()"                     style="width:160px;background-color:white; color:#c62222">                     <span class="fa fa-location-arrow"></span>                     <strong>                        select city                     </strong>                   </button>                   <ul class="dropdown-menu scrollablemenu" role="menu" ui-outer-click="ui.turnoff('mydropdown')" ui-outer-click-if="ui.active('mydropdown')" role="menu"                   ui-show="mydropdown" ui-state="mydropdown" ui-turn-off="mydropdown" style="margin-top:0 px;margin-top:-1px; text-align:center;height:300px;  overflow: scroll;">                          <li ng-repeat="city in cities">                          <a ng-href="#/citypage"  style="color:#763428; font-weight:bold;">{{ city.cityname }}</a>                       </li>                    </ul>               </div>         </div>       </div>     </div> </div> 

home page controller:

.controller('mycontroller' ,function ($scope, $http) {         $scope.getdatafromserver = function() {                       $http({                         method : 'get',                         url : 'http://192.168.0.3/sf/app/cityname',                         headers: {'content-type': 'application/json'},                  }).success(function(data, status, headers, config) {                                        $scope.cities = data;                        $scope.cities.foreach(function(product)     {                                             console.log(product.cityid);                                         });                   }).error(function(data, status, headers, config) {                   })          } }) 

when user click on select city dropdown city id come in console. after click on dropdown city next page come.

screen shot:

html code:

<div class="jumbtron scrollable-content text-center bg-color">    <div class="row">           <div class="bgimage">             </div>           <div class="btn-group img-responsive"  ng-controller="mycontrollercity">                <div ng-repeat="prdct in cityproduct">                    <a  href="#/category-prduct" style="color:#763428; font-weight:bold;">                       <img  src="{{prdct.categoryimage}}">                     </a>               </div>           </div>      </div> </div> 

controller:

.controller('mycontrollercity',function($scope, $http){          $http({                 method:'get',                 url:'http://192.168.0.3/sf/app/city-home/1',                 headers: {'content-type': 'application/json'},             }).success(function(data, status,headers, config) {                 $scope.cityproduct = data;                 $scope.cityproduct.foreach(function(product) {                         console.log(product.categoryid);                         console.log("--------------------------");                  });                   console.log("all id"+$scope.cityproduct[0].categoryid);              }).error(function(data, status, headers ,config) {         })   }) 

you can see city have how many product url:

> https://www.winni.in/app/city-home/12 > https://www.winni.in/app/city-home/1 > https://www.winni.in/app/city-home/2 

app.js

angular.module('y', [   'ngroute',   'mobile-angular-ui',   'y.controllers.main' ])  .config(function($routeprovider) {   $routeprovider.when('/', {templateurl:'home.html',  reloadonsearch: false})                 .when('/citypage', {templateurl:'citypage.html',  reloadonsearch: false})                 .when('/category-prduct', {templateurl:'category-prduct.html',  reloadonsearch: false})                 .when('/product-description', {templateurl:'product-description.html',  reloadonsearch: false})                 .when('/my-winni', {templateurl:'my-winni.html',  reloadonsearch: false})                 .when('/gift-box', {templateurl:'gift-box.html',  reloadonsearch: false}); }); 

i want show data in next page according city id.

we can find city id url http://www.winnni.in/app/cityname , append on url: https://www.winni.in/app/city-home/12

you have use routeparam in route file in following code. , have passed param in other controller via $routeparam. hope example you

index.html

<!doctype html> <html ng-app="myapp"> <head>     <title></title>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script> </head> <body>  <div ng-view></div>  <script> var app = angular.module('myapp', []); app.config(['$routeprovider',         function($routeprovider)          {             $routeprovider.                 when('/city',                  {                     templateurl: 'city.html',                     controller: 'citycontroller'                 }).                 when('/city/:city_id',                  {                     templateurl: 'city_id.html',                     controller: 'cityidcontroller'                 }).                 otherwise({                     redirectto: '/'                 });         }]);   app.controller('citycontroller', function($scope)  {     $scope.city_data = [                     {id:1,                     name:'rajkot'},                     {id:2,                     name:'morbi'}                     ]; });  app.controller('cityidcontroller', function($scope,$routeparams)  {     console.log($routeparams.city_id);     $scope.city_id = $routeparams.city_id; }); </script> </body> </html> 

city.html

<div ng-repeat="x in city_data">     <a href="#/city/{{x.id}}">{{x.name}}</a> </div> 

city_id.html

clicked city id : {{city_id}}