Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <ul>
        <li>
            <h4>123: Listing - Blah blah blah</h4>
            <div watch-button
                 type="listing"
                 id="123"
                 watching="true"
                 text="Watching">
            </div>
        </li>
        <li>
            <h4>124: Other - Blah blah blah</h4>
            <div watch-button
                 type="other"
                 id="124"
                 watching=""
                 text="Watch this">
            </div>
        </li>
        <li>
            <h4>125: Test - Blah blah blah</h4>
            <div watch-button
                 type="test"
                 id="125"
                 watching=""
                 text="Watch this">
            </div>
        </li>
    </ul>
</div>

CSS

li{
    background: #fee;
    padding: 5px;
    margin: 5px;
}

.watching-true,
.watching {
    background-color: royalBlue;
    color: white;
}

JavaScript

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

myApp.directive('watchButton', function () {
    return {
        replace: true,
        template: "<a href=''>LOL</a>",
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                if(!loggedIn){
                    scope.openModal(function(){
                       alert('winning');
                    });
                }
            });
        }
    }
});

function MyCtrl($scope) {
    $scope.openModal = function (callback) {
        result = confirm('Are you sure?');
        if(result){
            callback();
        }else{
            alert('you said no');
        }
    }
}