Simple $scope test not working - angularjs

Question

I'm trying to do a simple $scope controller practice. The app should show the result expression if the text value is the correct one...
<scope-test>
<h2>My Name?</h2>
<input type="text" ng-model="text"/>
<p>{{text}} {{result}}</p>
</scope-test>
And this is the app...
angular.module('angular-tests', [])
.directive('scope-test', function(){
return{
restrict:'E',
controller: function($scope){
if ($scope.text === "alex") {
$scope.result = "is correct!";
} else {
$scope.result = "is not correct!";
}
}
};
});
Ng-model is the only thing working fine.
Thanks!

Answer 1

Each controller function called once per load (like a constructor). It means that you check your value only once at the start.
You need to create a function inside your controller, which will be ran by each change:
<scope-test>
<h2>My Name?</h2>
<input type="text" ng-model="text" ng-change="changeHandler" />
<p>{{text}} {{result}}</p>
</scope-test>
angular.module('angular-tests', [])
.directive('scope-test', function(){
return{
restrict:'E',
controller: function($scope){
$scope.changeHandler = function(){
if ($scope.text === "alex") {
$scope.result = "is correct!";
} else {
$scope.result = "is not correct!";
}
}
}
};
});

Answer 2

The most simple solution would be to include a watch in your directive.
Angular Code
var myApp = angular.module('myApp',[])
.directive('scopeTest', function(){
return{
restrict:'E',
controller: function($scope) {
$scope.$watch('text', function() {
if ($scope.text === "alex") {
$scope.result = "is correct!";
} else {
$scope.result = "is not correct!";
}
})
}
};
});
HTML Code
<scope-test>
<h2>My Name?</h2>
<input type="text" ng-model="text"/>
<p>{{text}} {{result}}</p>
</scope-test>
Hope it helps!
Here is the fiddle: http://jsfiddle.net/au2uL08u/

Answer 3

Also note that your directive name needs to be camelCase. Then when you place your directive inside the template, you use hyphens for each word that begins with a capital.
<scope-test>
<h2>My Name?</h2>
<input type="text" ng-model="text" ng-change="evaluateText()"/>
<p>{{text}} {{result}}</p>
</scope-test>
angular.module('angular-tests', [])
.directive('scopeTest', function(){
return{
restrict:'E',
controller: function($scope){
$scope.evaluateText = function () {
if ($scope.text === "alex") {
$scope.result = "is correct!";
} else {
$scope.result = "is not correct!";
}
};
$scope.evaluateText();
}
};
});