Angular select array of objects

Question

I have an array of objects called presentations

I'm trying to use them in a select element, but it's not working. The select box just comes up blank with nothing in it.

I think it might be because it wants either an array, or an object, not an array of objects.

I'm doing:

<select ng-model="secondPres" ng-options="p.name for p in presentations" ></select>

And I can console.log my presentations array and get this:

0: Object
name: "club"
origName: "club"
slide: "1"
tenant: "grant"

1: Object
name: "2slide"
origName: "club"
slide: "1"
tenant: "grant"

2: Object
name: "CT_Stress_Test"
origName: "club"
slide: "1"
tenant: "grant"

So what's going on?

Here's my controller code. The console.log that produces shows what I have above is at the bottom. expand() is called on data-ng-init

var socket = io.connect('https://xxxxxxx.xxxxxxxxxxxxx.net:3000');

$scope.versions =[];
$scope.presentations=[];
$scope.secondPres;
$scope.expand = function(){
    console.log("expand hit " + presentation1);
    var urlToSign = presentation1;
    var urlToSign = urlToSign.replace(/^(.*)\/Slide\d_v\d.PNG(.*)/,"$1"+"");
    console.log("url to sign = " + urlToSign);
    socket.emit('getSignedSlidesFromUrl',urlToSign);
    socket.on('signedUrls',function(data){
        console.log('got back signedUrls' + data);
        $scope.slides=data;
        $scope.$apply();

        var re = /^.*\/\/.*\/.*\/(.*)/;
        var fileName = re.exec(urlToSign)[1];

        for(i=0;i<presentationList.length;i++){
            var url = presentationList[i];
            console.log(url);
            var re = /^.*\/\/.*\/(.*)\/.*$/;
            var re2 = /^.*\/\/.*\/(.*)\/.*\//;
            var re3 =/^.*\/\/.*\/.*\/Slide(\d*)/;
            var fileName2 = re.exec(url)[1];
            var customerName = re2.exec(url)[1];
            var slideNum = re3.exec(url)[1];

            $scope.presentations.push({name:fileName2, origName:fileName, tenant:customerName, slide:slideNum});
        }
        console.log($scope.presentations);
    });
};

Answer 1

Your just missing a $scope.$apply() after your for loop to make Angular see your new array items. Or wrap the entire contents of the event handler in a function passed to $scope.$apply() similar to the snippit here.

 socket.on('signedUrls',function(data){
    $scope.$apply(function() {
        console.log('got back signedUrls' + data);
        $scope.slides=data;

        var re = /^.*\/\/.*\/.*\/(.*)/;
        var fileName = re.exec(urlToSign)[1];

        for(i=0;i<presentationList.length;i++){
            var url = presentationList[i];
            console.log(url);
            var re = /^.*\/\/.*\/(.*)\/.*$/;
            var re2 = /^.*\/\/.*\/(.*)\/.*\//;
            var re3 =/^.*\/\/.*\/.*\/Slide(\d*)/;
            var fileName2 = re.exec(url)[1];
            var customerName = re2.exec(url)[1];
            var slideNum = re3.exec(url)[1];

            $scope.presentations.push({name:fileName2, origName:fileName, tenant:customerName, slide:slideNum});
        }
        console.log($scope.presentations);
    });
    });