setting up ngDialog - angularjs

Question

Guys I'm new to angular and trying to figure out how to implement a module called ngDialog so that I can have a pop up appear with angular data ect. Right now, I have my controller:
var oflApp = angular.module('oflApp', ['ngDialog']);
oflApp.controller('oflClassCtrl', function ($scope,ngDialog) {
$scope.classes = [
{"class": "ENGLISH I: INTRO TO LITERATURE AND COMPOSITION Sem 2", "href": "../courses/english.php#p1"}, ect
}];
$scope.clickToOpen = function(index){
$scope.selectedClass= $scope.classes[index];
ngDialog.open({template: '../inc/popUp.html'});
};
});
And html:
<table ng-controller="oflClassCtrl">
…
<tr ng-repeat = "selectedClass in classes | filter:searchTxt">
<td><a ng-click="clickToOpen($index)">{{selectedClass.class}}</a></td>
of course i've added the scripts underneath my angular scripts but is there anything else i need for this to work? I'm not sure what's going on but the pop will not show up on click so im sure something is wrong. What am I doing wrong? Thanks friends.
edit: I refactored my js because i was bored and read about doing it this way, but still doesn't work
(function(){
angular.module('oflApp', ['ngDialog'])
.controller('oflClassCtrl', oflClassCtrl)
function oflClassCtrl($scope,ngDialog) {
// $http.get('../courses/coursedata.json');
$scope.clickToOpen = function(index){
$scope.selectedClass= $scope.classes[index];
ngDialog.open({template: '../inc/popUp.html'});
};
$scope.classes = [
{"class": "ENGLISH I: INTRO TO LITERATURE AND COMPOSITION Sem 2", "href": "../courses/english.php#p1"},ect..
];
} //cntrler
})();