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="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-large" ng-click="open()">Open Modal</button>

<div class="modal hide" data-keyboard="false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal Header</h3>
    </div>
    <div class="modal-body">
        Modal Body goes here...
    </div>
    <div class="modal-footer">
        <div class="btn" data-dismiss="modal">Close</div>
    </div>
</div>

JavaScript

var App = angular.module('App', []);
App.run(function($rootScope) {
    $rootScope.open = function() {
        $('.modal').modal({backdrop: 'static'});
    };
});