Cautionary Tale for Angular Developers

Learn not to do imperative DOM manipulation inside controller

by codef0rmer

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.5.0/ui-bootstrap-tpls.min.js"></script>
<button class="btn btn-primary btn-large" ng-click="modalOpen = true">Open Modal</button>

<div class="modal hide" options="opts" modal="modalOpen">
    <div class="modal-header">
        <h3>Modal Header</h3>
    </div>
    <div class="modal-body">
        Modal Body goes here...
    </div>
    <div class="modal-footer">
        <div class="btn" ng-click="modalOpen = false">Close</div>
    </div>
</div>

JavaScript

var App = angular.module('App', ['ui.bootstrap']);
App.run(function($rootScope) {
    $rootScope.opts = {
        backdrop: true,
        backdropClick: false,
    };
    
    $rootScope.modalOpen = false;
});