Pass json data by selecting id using fresh scope in angularjs -

i have table in template retrieving json data `

id   type   date 755  video  21/09/12 

`.

here controller of retrieving data table

   .controller('list', function($scope, $http) {     $http.get(baseurl + '/page/1', _auth)     .success(function(data) {       $scope.value = data.data;     }, function(err) {         console.error(err);     });     $scope.detail = function(index) {       $http.get(baseurl + '/page')     }   }) 

for routing using ui-router , doing

$stateprovider    .state('/get' , {      url: '/data',      templateurl: 'app/list/data/data.html'    }) 

this page has button redirects different template on clicking row table. want clicking row redirects different template , show data related id clicked. how can achieve this? ?

thankx

you'll need route display particular element :

$stateprovider    .state('/get' , {      url: '/data',      templateurl: 'app/list/data/data.html'    })    .state('/getone' , {      url: '/data/:id',      templateurl: 'app/list/data/detail.html',      controller:"mycontroller"    }) 

you have param ":id" give element show.

you can in controller :

app.controller('mycontroller', function($scope, $stateparams) {     $scope.mydataid = $stateparams.id }); 

you can navigate using ui-sref syntax :

ui-sref="/getone({id:myelementid})" 

currently working on exemple in plunker.

hope helped.

edit : here clean "how do"

see in plunker

my states definition

app.config(function($stateprovider, $urlrouterprovider){   $urlrouterprovider.otherwise('/datalist');   $stateprovider   .state('datalist', {     url: '/datalist',     templateurl: 'data.html',     controller: 'datactrl',   })   .state('datadetail', {     url: '/datadetail/:id',     templateurl: 'detail.html',     controller: 'detailctrl',   }) });    

my controllers :

app.controller('datactrl', function($scope, $http){   $http.get("all.json").success(function(datas){     $scope.datas = datas;   }) });  app.controller('detailctrl', function($scope, $http, $stateparams){   $http.get($stateparams.id+".json").success(function(data){     $scope.data = data;   }) }); 

and data template :

<div>welcome awesome data list</div><br/> <div ng-repeat="data in datas">   <div>     data id : {{data.id}}   </div>     <div>     data name : {{data.name}}   </div>   <button ui-sref="datadetail({id:data.id})">see details of {{data.name}}</button> </div> 

i prefer lot not use "/" in state name till state name technical name , no displayed.

if have trouble try recreate states, steps steps.

edit 2 : how match question behavior

see on plunker

here how work "select" row on click.

since can refer "current" object of "ng-repeat= data in datas" "data". able pass function :

ng-repeat="data in datas" ng-click="select(data)" 

the function affect object var represent selected object :

$scope.select = function(data){   $scope.selecteddata = data; }; 

now button take information "selecteddata"

<button ui-sref="datadetail({id:selecteddata.id})" ng-disabled="!selecteddata">     see details of {{selecteddata.name}} </button> 

and ... that's pretty all. if have 2 states defined on first exemple have want.