IE Has Issues With Angular

by Josh Carroll

HTML

<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>
<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<div class="container">
    <div class="row-fluid">
        <div class="span12" ng-controller="displayCtrl">
             <h1>Using style=</h1>

            <select Name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" name="State" ng-attr-style="display:{{State_Display()}};">
                <input Name="Province" class="form-control" id="State" name="State" ng-attr-style="display:{{Province_Display()}};" type="text" value="" />
                 <h1>Using ng-show/hide</h1>

                <select Name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" name="State" ng-show="displayState()">
                    <input Name="Province" class="form-control" id="State" name="State" ng-show="displayProvince()" type="text" value="" />
        </div>
    </div>
</div>

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('displayCtrl', ['$scope', function (scope) {
        scope.State_Display = function () {
            return "none";
        };

        scope.Province_Display = function () {
            return "block";
        };

        scope.displayState = function () {
            return false;
        };

        scope.displayProvince = function () {
            return true;
        };
    }]);

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