AngularJS increment confusion on keeping code separate MVC - html

Question

I am learning AngularJS at the moment and I am a little confused about the MVC separation of code throughout the DOM/file structure when using AngularJS.
I learn best when I work on a project. Right now I am working on a simple counter that adds a whole number when a button is pushed. I only have one way working and I am thinking of a better way to do this.
Right now I have this working in the code I am working on from AngularJS documentation itself.
I am probably crazy thinking that this cannot be the best way to do this. From my understanding ng-click is a directive that triggers a specific scope of code within the controller.
Why is Increment code inline within the DOM? As a MVC, should the code be organized to not be all over the place, such as in the main controller.js? I have tried to put the increment += function in a counter object, but could not get it to work, see jsFiddle.
<div ng-controller="MyCtrl">
<button ng-click="char">Charged</button>
<span>Total: {{ count }}</span>
</div>
I get that Apps view information based on expressions, filters, and directives. Directives bind to HTML to change behavior of the HTML. Clicks (with Directive selectors) controllers triggers AngularJS to run functions to update data without the entire page being reloaded.
So the Model is the whole setup.
The View is the expressions, filters, and directives.
Controller is the JS file of code that has objects and functions needed for the HTML Directives.
The example of the documentation has inline controller in the directive ng-click within the button tag…
Does anyone have any advice? Thank you.:)

Answer 1

There is a correct way of doing that in angular via a controller:
http://jsfiddle.net/zhxztysy/1/
Your fiddle was like this
<div ng-controller="MyCtrl">
<button ng-click="char">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.count = Function (char) {
$scope.count += char;
};}
Changed to this
<div ng-controller="MyCtrl">
<button ng-click="charge(5)">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.charge = function (char) {
$scope.count += char;
};
}
Can also extended like this
<div ng-controller="MyCtrl">
<button ng-click="charge()">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.chargingCount = 5;
$scope.charge = function () {
$scope.count += $scope.chargingCount;
};
}
I edited your jsfiddle to work. You have made a syntax error (bound $scope.count to a function and tried to add numbers to it later on)