Why is this angularjs on jsFiddle not working

Question

Why is this angularjs on jsFiddle not working

I would expect to have the repeater listing this array :

function MyControl(){ var self = this;

self.values = ["a","b","c","d","e","f"];
self.selectedIndex = -1;

self.toggleSelect = function(ind){
    if( ind === self.selectedIndex ){
        self.selectedIndex = -1;
    } else{
        self.selectedIndex = ind;
    }
}

self.getClass = function(ind){
    if( ind === self.selectedIndex ){
        return "selected";
    } else{
        return "";
    }
}

self.getButtonLabel = function(ind){
    if( ind === self.selectedIndex ){
        return "Deselect";
    } else{
        return "Select";
    }
} }

angularjs

Answer 1

You should be using the $scope injectable to attach data to the DOM. Additionally, you were loading Angular.js twice (once via the "Choose Framework" dropdown and once via the "Add Resources" panel), resulting in a very, very strange bug.

Here's a working jsFiddle: http://jsfiddle.net/BinaryMuse/tNZAm/103/

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;

    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }

    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }

    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}