title: Angularjs - Render complex object using ng-repeat
body: <p>Here is my example <code>data</code> from server :</p>
  
  <pre><code>{
      "name": [
          "01.Song name ",
          "02 .Song name "
      ],
      "url": [
          "1.url",
          "2. url"
  
      ]
  }
  </code></pre>
  
  <p>and here is the controller :</p>
  
  <pre><code>hiren.controller('hirenz' , function($scope , $http , $location , $routeParams){
      $http.post((rootURL + "music") , {'alpha' : $routeParams.alpha , 'name' : $routeParams.name ,
          'album' : $routeParams.albumname }).success(function(data){
          $scope.groups= data ;
  
      });
  // some other code
  });
  </code></pre>
  
  <p>and the partial that is not working :</p>
  
  <pre><code>&lt;table class="table" &gt;
      &lt;tr&gt;
          &lt;th&gt;Select Song&lt;/th&gt;
      &lt;/tr&gt;
  &lt;tr ng-repeat="x in groups" &gt;
      &lt;td&gt;
          &lt;a  ng-click="x.url" class="button "&gt;
              &lt;span class="glyphicon glyphicon-user"&gt; {{ x.names }}&lt;/span&gt;
          &lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My problem is how do I repeat and render url and name in <code>ng-click=""</code> and  <code>{{ names }}</code> ?</p>