In my AngularJS test app, I've encountered an issue with loading a modal window dynamically using AngularUI. Although the modal windows load successfully, the $scope variables in the modal controller are not being accessed by the template, and I'm unable to trigger any $scope functions from the template.
For reference, here's the link to the plunkr showcasing the problem: Plunkr
Take a look at the $routeProvider configuration:
.config(function($routeProvider) {
$routeProvider
.when('/page/:name', {
templateUrl : 'modalContainer',
controller : 'ModalCtrl'
})
})
Additionally, here's the code for the ModalCtrl controller:
.controller('ModalCtrl',['$scope', '$modal', '$route', function($scope, $modal, $route) {
console.log("hello I am the ModalCtrl") //This console log runs
var modalInstance = $modal.open({
templateUrl : 'modal.html',
});
$scope.activity = $route.current.pathParams.name;
console.log($scope.activity) //This console log runs & shows the correct value,
// but the $scope variable is not visible in the template
//Modal controls
$scope.close = function () {
console.log("close!") //This does not run.
modalInstance.close();
};
}]);
It seems like there might be an issue with how I'm setting up the scope for the modal window. Can anyone spot where the problem lies?