IE Has Issues With Angular

by Josh Carroll

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div ng-controller="showDashboard">
    <article ng-repeat="widget in widgets" class="widget">
        <div ng-include="widget"></div>
    </article>
</div>
<script type="text/ng-template" id="widget1.html">
    <h1>Widget 1</h1>
</script>
<script type="text/ng-template" id="widget2.html">
    <h1> Widget 2 </h1>
</script>
<script type="text/ng-template" id="widget3.html">
    <div ng-controller="widgetCtrl">
        <h1>{{title}}</h1>
        <ul ng-repeat="name in names" ng-hide="hideNames">
            <li>{{name}}</li>
        </ul>
        <button type="button" ng-click="toggleNames()">Hide Names</button>
    </div>
</script>

JavaScript

/**
 * Created with JetBrains WebStorm.
 * User: Josh
 * Date: 3/26/13
 * Time: 11:52 AM
 * To change this template use File | Settings | File Templates.
 */

angular.element(document).ready(function () {
    var app = angular.module("so", []);

    app.controller('showDashboard', function ($scope) {
        $scope.widgets = ['widget1.html', 'widget2.html', 'widget3.html'];
    });
    
    app.controller('widgetCtrl', function($scope){
        $scope.hideNames = false;
        $scope.title = "I'm A Widget With A Controller!";
        $scope.names = ['Josh', 'Johnny', 'James'];
                        $scope.toggleNames = function(){
                            $scope.hideNames = !$scope.hideNames;
                        };
    });

    angular.bootstrap(document, ['so']);
});