angularjs - ng-repeat not copying correctly over -

i have ng-repeat working within different template, however, can not album.html template display content. here have.

app.js

...             .state('album', {                 url: '/album',                 controller: 'albumctrl album',                 templateurl: '/templates/album.html'             }) ... 

albumctrl.js

(function() {    function albumctrl() {     this.albumdata = angular.copy(albumpicasso);   };    angular     .module('blocjams')     .controller('albumctrl', albumctrl);  })(); 

fixture.js (where object want copy lives)

var albumpicasso = {     title: 'the colors',     artist: 'pablo picasso',     label: 'cubism',     year: '1881',     albumarturl: 'assets/images/album_covers/01.png',     songs: [         { title: 'blue', duration: 161.71, audiourl: 'assets/music/bloc_jams_music/blue' },         { title: 'green', duration: 103.96, audiourl: 'assets/music/bloc_jams_music/green' },         { title: 'red', duration: 268.45, audiourl: 'assets/music/bloc_jams_music/red' },         { title: 'pink', duration: 153.14, audiourl: 'assets/music/bloc_jams_music/pink' },         { title: 'magenta', duration: 374.22, audiourl: 'assets/music/bloc_jams_music/magenta' }     ] }; 

albumt.html (here template ng-repeat)

<main class="album-view container narrow">     <section class="clearfix">         <div class="column half">             <img src="/assets/images/album_covers/01.png" class="album-cover-art">         </div>         <div class="album-view-details column half">             <h2 class="album-view-title">the colors</h2>             <h3 class="album-view-artist">pablo picasso</h3>             <h5 class="album-view-release-info">1909 spanish records</h5>         </div>     </section>     <table class="album-view-song-list">         <tr class="album-view-song-item" ng-repeat="album in album.albumdata" ng-mouseover="hovered = true" ng-mouseleave="hovered = false">             <td class="song-item-number">               <span ng-show="!playing && !hovered"></span>               <a class="album-song-button" ng-show="!playing && hovered"><span class="ion-play"></span></a>               <a class="album-song-button" ng-show="playing"><span class="ion-paused"></span></a>             </td>             <td class="song-item-title">{{ album.songs.title }}</td>             <td class="song-item-duration">{{ album.songs.duration }}</td>         </tr>     </table> </main>  <ng-include src="'/templates/player_bar.html'"></ng-include> 

{{ album.songs.title }} , {{ album.songs.duration }} isn't displaying content nor receiving errors. believe not copying object through controller correctly? further, how can see input of said object through controller test whether object albumpicasso copied correctly?

for reference

this controller (collectionctrl.js) working correctly , mirrors want besides for loop.

(function() {    function collectionctrl() {     this.albums = [];     (var i=0; < 12; i++) {       this.albums.push(angular.copy(albumpicasso));     }   }     angular     .module('blocjams')     .controller('collectionctrl', collectionctrl); })(); 

album in album.albumdata
may want not override album variable name?

controller alias variable in scope. overwriting it.

it looks like:

for (var = 0; < album.albumdata.length; i++) {   album = album.albumdata[i]; // <-- brake things here } 

just rename album in ngrepeat item:

ng-repeat="item in album.albumdata"

---

also, want iterate songs array, not object:

ng-repeat="song in album.albumdata.songs"

and

{{song.title}}