Scope variable are not available in the template - angularjs

Question

I started a project with angular-seed. I mixed it with another project in which has jQuery. I can't reach the scope variables in my template.
JS:
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', function ($scope) {
$scope.showView = true;
$scope.proBlock = false;
$scope.modelBlock = false;
$.when(dbReadyDeferred).then(function() {
$scope.proBlock = true;
console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
});
...
HTML:
<div ng-show="showView">
{{proBlock}}
</div>
In the browser, it shows: false. Is there something wrong with my code?
Thanks

Answer 1

As your using $.when, which is out of Angular world, you have to explicitly use $timeout or $scope.$digest.
You can use Angular's promise library which is $q.when method, as AngularJS will attach the watch to it and changes accordingly.
$q.when(dbReadyDeferred).then(function() {
$scope.proBlock = true;
console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
});
If you want to use jQuery.when method, then used $timeout as below:
$.when(dbReadyDeferred).then(function() {
$timeout(function() {
$scope.proBlock = true;
console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
},0,false) // false it doesnt invoke digest again which helps in performance
});

Answer 2

If you are sure that your function $.when(dbReadyDeferred).then(function() {}) is being called then change your controller code like this:
.controller('View1Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.showView = true;
$scope.proBlock = false;
$scope.modelBlock = false;
$.when(dbReadyDeferred).then(function() {
$timeout(function() {
$scope.proBlock = true;
console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
});
});
}]);
Since, you are changing the $scope.proBlock value using jQuery so the Angular is unaware of this change and we need to explicitly tell Angular to run the digest cycle.
We can use $scope.$apply() as well but wrapping the call into $timeout function is a cleaner approach.
Read more: AngularJS with Ajax Form submission needing to click twice
Update:
You can modify your resolve variable like this:
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'.
resolve: {
dbState: ['$rootScope', '$q', function($rootScope, $q) {
var promise = $q.when(dbReadyDeferred)
promise.then(function() {
$rootScope.$broadcast("dbStateReady");
});
return promise;
}]
}
});
}])
.controller('View1Ctrl', ['$scope', function ($scope) {
$scope.showView = true;
$scope.proBlock = false;
$scope.modelBlock = false;
var deregisterFunction = $scope.$on("dbStateReady", function() {
$scope.proBlock = true;
console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
deregisterFunction(); // Remove this watch for $on listener
});
});
Basically, we moved the $q.when (like #shushanthp mentioned) to the resolve and using $broadcast to know about when the db state is ready using $on.