Angular: my test

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div ng-controller="MyCtrl">
    <div class="flags">
        <div>
            Finished flag: 
            <span>{{ check(referenceCheck.finished) }}<span>
        </div>
        <div>
            Add manager flag: 
            <span>{{ check(referenceCheck.add_manager) }}</span>
        </div>
    </div>
    <button ng-click="promptAndSave()">Show Confirmation</button>
    <div id="confirmationForm" ng-show="confirmation.visible">
        <div class="form-title">{{ confirmation.title }}</div>
        <div class="form-body">
            <div class="message" ng-bind-html="confirmation.prompt"></div>
            <div class="actions"> <span>
            <button ng-click="confirmation.yes()">Yes</button>
            <button ng-click="confirmation.no()">No</button>
          </span>

            </div>
        </div>
    </div>
</div>

CSS

body {
    padding: 20px;
    font-face: helvetica;
}
.flags {
    padding: 10px;
    line-height: 1.5em;
}
#confirmationForm {
    text-align: center;
    border: 1px solid black;
    padding: 15px;
    margin-top: 30px;
}
.form-title {
    font-weight: bold;
    margin-bottom: 10px;
}
.actions {
    margin: 20px 0 0 0;
}

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $q, $sce) {

    $scope.referenceCheck = {
        finished: false,
        add_manager: false
    };
    
    $scope.check = function(what) {
        return (what ? "YES" : "NO");
    };

    $scope.confirmation = {
        visible: false,
        title: "",
        prompt: "",
        reset: function() {
            this.visible = false;
            this.title = "";
            this.prompt = "";
        },
        yes: function () {
            this.reset();
            return this.deferred.resolve();
        },
        no: function () {
            this.reset();
            return this.deferred.reject();
        },
        display: function (title, prompt, yesHandler, noHandler) {
            this.deferred = $q.defer();
            this.title = title;
            this.prompt = $sce.trustAsHtml(prompt);
            this.yesHandler = yesHandler;
            this.noHandler = noHandler;
            this.visible = true;
            return this.deferred.promise;
        }
    };

    $scope.saveReferenceCheck = function () {
        console.log("Saving ", $scope.referenceCheck);
    };

    $scope.promptAndSave = function () {
        $scope.referenceCheck.finished = false;
        $scope.referenceCheck.add_manager = false;            
        
        var x = $scope.confirmation.display("Confirmation", "Did you finish working on this Reference Check?").then(function () {

            $scope.referenceCheck.finished = true;

            var manager_name = "Manager Name";

            return $scope.confirmation.display("Add new manager", "Do you want to add <b>" + manager_name + "</b> as a new manager to your database?").then(function () {

                $scope.referenceCheck.add_manager = true;

            });

        }).finally(function() {
            $scope.saveReferenceCheck()
        });
    };

}