For ... in problem with Angular and jsFiddle

When you have a piece of code that is using For ... in loop + angularJS in your html site, you might be getting unexpected results in ie...

by nekyouto

HTML

<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
    <div ng-controller="SelectCtrl">
        <table>
            <tr>
                <td> <span>Dropdown 1:</span>
                    <select ng-model="selectedItem" ng-options="item.label for item in myData"/>
                </td>
            </tr>
            <tr>
                <td><br/>Will gives problem in IE.</td>
            </tr>
            <tr>
                <td> <span>Dropdown 2:</span>
                    <select ng-model="selectedItem1" ng-options="item.label for item in newData"/>
                </td>
            </tr>
        </table>
    </div>
</body>

CSS

table {
    width:100%;
}

tr {
    width:100%;
}

td {
    width:100%;
    text-align:center;
}

button {
    width:150px;
}

JavaScript

// declare a module
var myApp = this.angular.module('myApp', []);

// declare a controller
myApp.controller('SelectCtrl', function ($scope) {    
    $scope.selectedItem = null;
    $scope.myData = [{
        label: "Book 1",
        type: "Kids",
        value: 2
    }, {
        label: "Book 2",
        type: "Adult",
        value: 3
    }, {
        label: "Book 3",
        type: "Adult",
        value: 4
    }, {
        label: "Book 4",
        type: "Kids",
        value: 5
    }];
    
    $scope.selectedItem1 = null;
    $scope.newData = [];
    
    $scope.rebuildData = function(){
        $scope.newData = [];
        var obj;
        for(i in $scope.myData)
        {
            obj = new Object();
            obj.label = i;
            obj.value = i;
            $scope.newData.push(obj);
        }
    }
    
    $scope.rebuildData();
});