Pass an array in url width ionic
<p><strong>Hello everyone</strong> :)</p>

<p>I have an array lesMusiques, and when I click on a music I would like to have informations about this one.
For example, if I selected the first one, I must have the array : {"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"}</p>

<p>But I don't know how to pass it in the url as a parameter. I saw stuffs like enter each value of the array, but I hope it's not the only solution ..</p>

<p>There is my code :</p>

<pre><code>var lesMusiques = [
  {"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"},
  {"id":"31", "image":"/img/another-love.jpg", "artiste":"Tom Odell", "titre":"Another love", "duree": "4:22"},
  {"id":"32", "image":"/img/Dont-Mind-Kent-Jones.jpg", "artiste":"Kent Jones", "titre":"Don't mind", "duree": "3:31"},
  {"id":"33", "image":"/img/Jain_Cover_Album.jpg", "artiste":"Jain", "titre":"Come", "duree": "32:23"},
  {"id":"34", "image":"/img/Snoop-dogg.jpg", "artiste":"Snoop Dogg", "titre":"This city", "duree": "33:54"},
  {"id":"35", "image":"/img/another-love.jpg", "artiste":"Tom Odell", "titre":"Another love", "duree": "34:22"}
];

.controller('HomeCtrl', function($scope, $state){

/* On passe l'id de la musique sélectionnée au controlleur MusicCtrl */
  $scope.recupId = function(tabMusic){
    $state.go('music', {tabMusic})
  }

// On indique à la vue qu'elle dispose maintenant du tableaux contenant les musiques
  $scope.lesMusiques = lesMusiques;
})

.controller('MusicCtrl', function($scope, $stateParams){
  console.log($stateParams);
})
</code></pre>

<p>And my stateProvider :</p>

<pre><code>$stateProvider.state('music',{
  url: '/musiques/:TabMusiques',
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})
</code></pre>

<p>In my view (home.html) :</p>

<pre><code>&lt;ion-list&gt;
        &lt;!-- Chaque item est un lien --&gt;
        &lt;a ui-sref="music" ng-repeat="laMusique in lesMusiques" ng-model="TabMusic" ng-click="recupId(I DON'T KNOW WHAT TO PUT HERE)" class="item item-thumbnail-left"&gt;

                &lt;img src="{{laMusique.image}}"&gt;
                &lt;h2 class="white"&gt;{{laMusique.titre}}&lt;/h2&gt;
                &lt;p class="white"&gt;{{laMusique.artiste}}&lt;/p&gt;
                &lt;p class="padding-vertical white"&gt;{{laMusique.duree}}&lt;/p&gt;
        &lt;/a&gt;
&lt;/ion-list&gt;
</code></pre>

<p>I hope some of you would help me :)</p>

<p>EDIT : My home page :
<a href="https://i.stack.imgur.com/4Mdho.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Mdho.png" alt="enter image description here"></a></p>

<p><strong>EDIT 2 :</strong>
When I take a <code>console.log($state.parameters.musiqueChoisi);</code> I have an error : Cannot read property 'musiqueChoisi' of undefined ! Why ?</p>

<p>Now my code is :</p>

<pre><code>$stateProvider.state('music',{
  url: '/musiques',
  parameters: { musiqueChoisi : null },
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})
</code></pre>

<p>and in HomeCtrl :</p>

<pre><code>.controller('HomeCtrl', function($scope, $state){

/* On passe l'id de la musique sélectionnée au controlleur MusicCtrl */
  $scope.recupId = function(tabMusic){
    $state.go('music', {musiqueChoisi : tabMusic})
  }
})
</code></pre>

<p>MusicCtrl :</p>

<pre><code>.controller('MusicCtrl', function($scope, $stateParams, $state){
  $state.parameters.musiqueChoisi
  console.log($state.parameters.musiqueChoisi);
})
</code></pre>

<p><strong>EDIT 3 : SOLUTION (Thanks C.Champagne)</strong></p>

<p>So there are my controllers :</p>

<pre><code>.controller('HomeCtrl', function($scope, $state){

    $scope.recupId = function(tabMusic){
      $state.go('music', {musiqueChoisi : tabMusic})
    }
    $scope.lesMusiques = lesMusiques;
})

.controller('MusicCtrl', function($scope, $stateParams, $state){
    var musique = $state.params.musiqueChoisi
    console.log(musique);

    $scope.musique = musique;
})
</code></pre>

<p>The StateProvider :</p>

<pre><code>$stateProvider.state('music',{
  url: '/musiques',
  params: { musiqueChoisi : null },
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})
</code></pre>

<p>And in my view :</p>

<pre><code>ng-click="recupId(laMusique)"
</code></pre>