Template Provider Doesn't Fire $Scope Logic - angularjs

Question

I'm using angular ui-router and need to show a different template for a given state based on a variable in the parent (body) scope. But when I add this $scope.data conditional it doesn't fire. I don't even get the console.log() or any url change. :(
$stateProvider.state('map1', {
url: "/content/sectionI",
templateProvider: function($scope, $http, $stateParams) {
console.log("Wowie!",$scope.data);
if($scope.data.Section_I_Part_1_Complete == "0")
{
return $http({
method: 'GET',
url: 'http://example.com/contentMore',
params: {
request: "Section_I_Part_1_Complete",
part: "1"
}
}).then(function successCallback(html) {
return html.data;
});
}
else
{
return $http({
method: 'GET',
url: 'http://example.com/contentMore',
params: {
request: "Section_I_Unlocked",
part: "map"
}
}).then(function successCallback(html) {
return html.data;
});
}
},
controller: function($scope) {
$scope.activeSection.activeSection = "notNone";
}
})
How do I do it so that I can get the template to return based on the value of a variable in the parent scope?

Answer 1

Just use a service to store the data and inject that service.
templateProvider: function(myDataService) {
var part = myDataService.Section_I_Part_1_Complete == "0" ? 1 : 'map';
return $http.get('http://example.com/contentMore', {
params: {
request: "Section_I_Part_1_Complete",
part: part
}
}).then(function(response) {
return response.data;
});
}