AngularJS: applying dynamic class on button that called it - html

Question

sorry the title may be confusing, but what I am trying to do is dynamically change a class based on a button click. However, this works on every tag except the ons-button that calls the changToRed function.
<div ng-controller="clickCtrl">
<ons-button ng-class="dynamic" ng-click="changeToRed()">Red</ons-button>
</div>
Here is my main.js file:
var myApp = angular.module('myApp');
myApp.controller('clickCtrl', function($scope){
$scope.dynamic = "blue";
$scope.changeToRed = function(){
$scope.dynamic = "red";
}
$scope.changeToGreen = function(){
$scope.dynamic = "green";
}
$scope.changeToBlue = function(){
$scope.dynamic = "blue";
}
});
Thanks,
Ben

Answer 1

ons-button is using ng-class internally. If you don't need the spinner animation, you can just use the class version.
<button ng-class="dynamic" ng-click="changeToRed()" class="topcoat-button">Red</button>
You also need to add !important to your css.
.red {
background-color: red !important;
}

Answer 2

It is an issue with AngularJS' scope. It is a long article, but the part you need is about scope dot notation. Change your controller to this:
var myApp = angular.module('myApp');
myApp.controller('clickCtrl', function($scope){
$scope.model = {};
$scope.model.dynamic = "blue";
$scope.changeToRed = function(){
$scope.model.dynamic = "red";
}
$scope.changeToGreen = function(){
$scope.model.dynamic = "green";
}
$scope.changeToBlue = function(){
$scope.model.dynamic = "blue";
}
});
And then change your HTML to this:
<div ng-controller="clickCtrl">
<ons-button ng-class="model.dynamic" ng-click="changeToRed()">Red</ons-button>
</div>