AngularJS: Binding to an array, but a specific property?

Just create a function on the scope which will extract the needed properties from the array. Something like:

scope.getMediumUrls = function(arr) {
  return $.map(arr, function(item) { return item.mediumURL; });
}

And then use it on the directive:

<div ng-repeat="user in users">
  <wallop-slider data-images="getMediumUrls(user.media)"...></wallop-slider>
</div>

You need to loop through the object along with the key and corresponding properties.

Suppose you have JS object as

var media = [
 {'mediumURL':'http://whatever.com/image.jpg'},
 {'mediumURL':'http://whatever.com/image2.jpg'}
];

Lets apply for in loop for getting values

for(key in media){
 alert(media[key].mediumURL);
}

Here "key" refers to index for media[] and "mediumURL" is the individual corresponding property.

In your case,

<div ng-repeat="user in users">

    <wallop-slider
        data-images="??user.mediumURL??"
        data-animation="rotate"
        data-current-item-index="currentSliderIndex"></wallop-slider>

</div>

Note: You were using "user.media.mediumURL", hence it wont work because "media" is not property for each object structure under media[].

You can refer to this link for more details on ng-repeat looping examples.

Edit: If you already have a dependency on jQuery, I would pick Shay Friedmans answer.

I think this will do your trick (without the need for any additional libraries).

// Helper function to pluck the url property from the media items.

function pluckUrls() {
  var ret = [], c = $scope.mediaItems.length;

  while(c--) {
    ret.push($scope.mediaItems[c].url);
  }

  return ret;  
}

// Function that is called each watch cycle. The return value will differ
// if one of the urls has been modified.

function getUniqueWatchValue() {
  return pluckUrls().join();
}

// Function that is called whenever one of the urls has been modified.

function watchValueChanged() {
  console.log('One of the urls has been modified');
  $scope.mediaUrls = pluckUrls();
}

// Hook up the watch.

$scope.$watch(getUniqueWatchValue, watchValueChanged);

Plunker in action can be found here.

Note: I noticed a piece of code in that wallop-slider thingy that is watching a reference to the array, not it contents. I haven't tested it but it probably requires you to recreate the array completely instead of simply adding or removing element from it.

$scope.$watch('images', function(images) {
  if (images.length) {
    _goTo(0);
  }
});

The easiest way to do is using underscore like the following:

    <wallop-slider
        data-images="_.pluck(user.media.mediumURL, 'mediumURL')"
        data-animation="rotate"
        data-current-item-index="currentSliderIndex"></wallop-slider>

</div>

But before that you need do 2 things:

1. add underscore

   <script src="/whatever/underscore.js"></script>

2. inject underscorejs into controller like the folloiwng

angular.module('app', []) .controller('Ctrl', function($scope, $window) { $scope._ = $window._ });

Hope that help, Ron