In AngularJS, how do I get two buttons to call different functions? - angularjs

Question

I'm working on something where you have a reset button, a button to save changes to a database object, and I added a delete button next to it. No matter what I do, I can't seem to find how to get the two different buttons to call different functions. I'm very new at this...
Here's the HTML part.
<fieldset>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" value="Submit" ng-disabeled="myForm.$invalid" class="btn btn-primary">Save Changes / Create</button>
<button type="remove" value="Remove" ng-model="deleteProduct()" class="btn btn-primary">Delete</button>
</div>
</div>
</fieldset>
The ng-model part I added doesn't seem to do anything. No matter what I do, I can't get it to call a different function to the Save button. *
*Disclaimer I took over this project and didn't write it from scratch. I've tried crawling through the code and adding things everywhere (with console.log lines added in to see if they ever get called) but I can't seem to crack it. Does anyone have any ideas?

Answer 1

You can use ng-click to assign a click listener in Angular.
<button type="reset" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="submit" value="Submit" ng-disabeled="myForm.$invalid" class="btn btn-primary" ng-click="submit()">Save Changes / Create</button>
In your controller find these functions to perform specific operations that you need.
$scope.submit = function() {
console.log("Submit button clicked");
}
$scope.cancel = function() {
console.log("Cancell button clicked");
}

Answer 2

Try ng-click for function call use like
<button ng-click="myFunc()">OK</button>

Answer 3

Some corrections need to be made in your code :
It should be ng-disabled instead of ng-disabeled.
type="remove" is not valid type of the element. Use type="button" with ng-click="remove()"
Working code :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.cancel = function() {
console.log("cancel call");
}
$scope.save = function() {
console.log("save call");
}
$scope.remove = function() {
console.log("remove call");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="myForm">
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="submit" value="Submit" ng-disabled="myForm.$invalid" class="btn btn-primary" ng-click="save()">Save Changes / Create</button>
<input type="button" value="Remove" ng-click="remove()" class="btn btn-primary"/>
</div>
</div>
</form>
</div>