angularjs - Pass data from one state to another (updated) -

right i'm using ui-router's states navigation , ng-repeat (within page) listing artists. when clicks on artist opens modal view more details , bio.

the modal gets data ng-repeat , index...

<div id="{{$index}}" aria-hidden="true" role="dialog" tabindex="-1" class="portfolio-modal modal fade"> <div class="col-lg-12">                 <h2>{{artistesitem.name}}</h2>                 <hr class="star-primary"/>               </div> 

what i'd pass artist data page can full url path artist bio can link this.

i've looked couple of docs , articles on web , i've got part of answer code below isn't working expected. artist page opens isn't passing screen buttons. console mention id undefined url indeed showing right id?

state

  .state('artistview', {       url: 'musique/{id}',       views: {           '':{ templateurls: 'index.html'},           'navbar' : { templateurl: 'views/navbar.html'},           'artist' : { templateurl: 'views/artist.html'},           'footer': { templateurl: 'views/footer.html'}       },       controller: 'viewoneartist',       resolve: {           artistview: ['$http', '$stateparams', function($http, $stateparams) {               return $http.get($stateparams.id).then(function(data) {                   return data.data;               });           }]       }   }) 

the controller

app.controller('viewoneartist', function($scope, $http, $resource, artistesurl, baseurl) {  $scope.artistesitemsresource = $resource(baseurl + artistesurl + ":id", {id: "@id"},     { create : { method: "post"}, save: { method: "put"}} );  $scope.id = id;  $scope.listoneartiste = function(id) {      $scope.artistesitems = $scope.artistesitemsresource.get(id); };  $scope.listoneartiste(id);  }); 

html link passing data. on html page bind {{image}} example...what missing?

 <a ui-sref="artistview({id: artistesitem.id})">click test</a> 

ui-serf should not use interpolation directive, wanted pass id parameter route, should pass parameter inside json {id: artistitem.id}, create href attribute & contains url id

markup

<a ui-sref="artistview({id: artistitem.id})">click test</a> 

update

for passing multiple parameter $stateparams 1st need register each parameter inside $state definition

 .state('artistview', {       url: 'musique/{name}',       views: {           '':{ templateurls: 'index.html'},           'navbar' : { templateurl: 'views/navbar.html'},           'artist' : { templateurl: 'views/artist.html'},           'footer': { templateurl: 'views/footer.html'}       },       parmas: {           'name': {value: null}, //set value default null if not passed           'bio': {value: null},           'image': {value: null},           'facebook': {value: null},           'twitter': {value: null},           'instagram': {value: null},           'googleplus': {value: null},           'site': {value: null},           'nextevent': {value: null},           'devistechnique': {value: null},           'video': {value: null},           'authorized': {value: null},           'exclusif': {value: null}       },       controller: function($scope, $stateparams) {           //pass url           $scope.name = $stateparams.name;           //pass data artist page           $scope.bio = $stateparams.bio;           $scope.image = $stateparams.image;           $scope.facebook = $stateparams.facebook;           $scope.twitter = $stateparams.twitter;           $scope.instagram = $stateparams.instagram;           $scope.googleplus = $stateparams.googleplus;           $scope.site = $stateparams.site;           $scope.nextevent = $stateparams.nextevent;           $scope.devistechnique = $stateparams.devistechnique;           $scope.video = $stateparams.video;           $scope.authorized = $stateparams.authorized;           $scope.exclusif = $stateparams.exclusif;       }   }); 

above solution work, though don't think way doing enough. better approach create service keep track of parameter.