template is not updated when model change in Angularjs - angularjs

Question

I do not know why when I click on Submit button $scope.result get the value (printed out by console.log) but it do not print out any thing by {{result}} in the template while {{countDown}} is still work ok. How to fix it?, thanks
SCRIPT:
angular.module('mean.system').controller('HeaderController', ['$scope', 'Global', $timeout', '$http', '$location', function ($scope, Global, $timeout, $http, $location) {
$scope.findFriend = function() {
$scope.result = "submit button is clicked";
console.log($scope.result); //submit button is clicked
}
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
}, 1000);
}]);
HTML:
<div data-ng-controller="HeaderController">
<div> {{countDown}} </div>
<form ng-submit="findFriend()">
<input type="email" ng-model="friendEmail">
<input type="submit" value="Find">
</form>
</div>
<section data-ng-controller="HeaderController">
<div> Confirm: {{result}} </div>
<div> {{countDown}} </div>
</section>

Answer 1

Here's your problem, other then the previous comment that you were using two controllers, but also, by having your outside of your initial that has the controller on it, then that's outside of the scope.
What you want to do is put the inside the . Here's how it should look along with a fiddle that shows this working for you.
<div ng-controller="MyCtrl">
<div>{{countDown}}</div>
<form ng-submit="findFriend()">
<input type="text" ng-model="friendEmail" />
<input type="submit" value="Find" />
</form>
<div>Confirm: {{result}}</div>
<div>{{countDown}}</div>
</div>
http://jsfiddle.net/HB7LU/1792/
And to be detail oriented, make sure to self close your tags, it's better formed HTML.
To be able to pass variables between different controllers, you can do it using a service as mentioned in the comment, this is a good simple example:
https://gist.github.com/exclsr/3595424
Cheers.