I'm having issues with a dynamically placed template.
My HTML for index.html looks something like this:
<body data-ng-controller="MainController">
<data-ng-include id="outside" src="dynamicTemplate()"></data-ng-include>
</body>
The index.html page displays a template based on a certain condition.
Here is the code for my home.html, which is the default template for index.html.
<span data-ng-bind="message" data-ng-style="messageStyle"></span>
<form data-ng-controller="FormController" data-ng-submit="processForm()">
other form stuff goes here
</form>
My FormController looks something like this:
app.controller("FormController", ['$scope', '$http', '$window', function($scope, $http, $window) {
$scope.message = "";
$scope.processForm = function() {
$scope.message = "Processing form";
$scope.messageStyle = {
"color": "green"
};
// Ajax Logic to process form
.success(function(data) {
$scope.message = data.msg; /* Message never gets updated in the view */
});
};
}]);
The issue here is that the $scope.message
never displays any data in the data-ng-bind="message"
after the FormController gets called. I think the issue lies with the scope not knowing which controller it belongs to. How can I fix this?