title: Pass data from one state to another
body: <p>Right now I'm using UI-router's states for navigation and NG-repeat (within a page) for listing artists. When someone clicks on an artist it opens up a modal view with more details and bio.</p>
  
  <p>The modal gets the data from NG-repeat and Index...</p>
  
  <pre><code>&lt;div id="{{$index}}" aria-hidden="true" role="dialog" tabindex="-1" class="portfolio-modal modal fade"&gt;
  &lt;div class="col-lg-12"&gt;
                  &lt;h2&gt;{{artistesItem.name}}&lt;/h2&gt;
                  &lt;hr class="star-primary"/&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>What I'd like to do is pass the artist data to another page where we can get the full URL path for the artist bio so someone can link to this.</p>
  
  <p>I've looked into a couple of docs and articles on the web and I've got part of my answer so obviously my code below isn't working as expected. The artist page opens but isn't passing anything as I get a screen with only the buttons. The console does mention ID as undefined but the URL is indeed showing the right ID?</p>
  
  <p>State</p>
  
  <pre><code>  .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;
                });
            }]
        }
    })
  </code></pre>
  
  <p>The controller</p>
  
  <pre><code>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);
  
  });
  </code></pre>
  
  <p>HTML link passing the data. Then on the HTML page I bind with {{image}} for example...what I am missing?</p>
  
  <pre><code> &lt;a ui-sref="artistView({id: artistesItem.id})"&gt;Click TEST&lt;/a&gt;
  </code></pre>