Angular Bad "Selected" binding

Angular will not bind an attribute value to "selected"

by rgthree

HTML

<section>
    <nav ng-controller="SelectionController">
        These are both using the same data, and should both work updating each other. The first set, which binds to a "selected" attribute does not work, however.
        <br><hr><br>
        This one is using "selected" attribute, which does not update and is broken:
        <ul selected="{{selectedIndex}}">
            <li ng-repeat="item in items" ng-click="setSelectedIndex($index)">{{item}}</li>
        </ul>
        <br><hr><br>
        This one is using a made-up "test" attribute, which binds as expected:
        <ul test="{{selectedIndex}}">
            <li ng-repeat="item in items" ng-click="setSelectedIndex($index)">{{item}}</li>
        </ul>
    </nav>
</section>

CSS

ul {margin:10px; padding:0px; list-style:none;}
ul > li {cursor:pointer; padding:10px; border:1px solid #CCC;}
ul > li:hover {background:#FAFAFA;}
ul[selected="0"] > li:nth-child(1),
ul[selected="1"] > li:nth-child(2),
ul[selected="2"] > li:nth-child(3) {background:#0F0; color:#FFF}
ul[test="0"] > li:nth-child(1),
ul[test="1"] > li:nth-child(2),
ul[test="2"] > li:nth-child(3) {background:#F00; color:#FFF}

JavaScript

var app = angular.module('app',[]).controller('SelectionController', ['$scope', function($scope) {
    $scope.items = ['One', 'Two', 'Three'];
    $scope.selectedIndex = 0;
    $scope.setSelectedIndex = function(index) {
        $scope.selectedIndex = index;
    };
}]);
angular.bootstrap(document, ['app']);