Here's the HTML code:
<div ng-controller="AutoDeployController as autoDeploy">
<input type="text" ng-model="autoDeploy.message">
<p>Message: {{ autoDeploy.message }}</p>
</div>
<button ng-click="autoDeploy.change()">change</button>
This is a function in my controller:
model = this;
model.change = function(){
model.message = AutoDeployService.returnOne();
};
And here's the method in my service module:
function returnOne(){
return "one";
}
Even though I can see that model.message changes to "one" when I debug it in Chrome, the DOM doesn't update when I click the button. However, if I type in the text box, the value of model.message updates along with other fields using model.message. Any ideas on why this might be happening?
I'm guessing it could be related to $compile or another system variable based on my experience with dynamically adding elements to the DOM with buttons. But I'm unsure about when and why these system variables come into play.