javascript - console.log for $scope in angular js

Why I'm not able to console output $scope values ? I'm trying to extract user assigned values from the pages and retrieve in controller. Eventually i would like to pass this to service so multiple controllers can access these data.

HTML

    
            

            
                
            
            
            
            
                

            
              

    
     
        

            

                
Hello world!
                 Please enter something
                
                
 This is what you entered : {{ name }} 
                
 now filtering: {{ lower() }}
            

        
    

APP.JS

var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {


    $scope.name = 'Test ';  
    $scope.lower = function(){
        return $filter('lowercase')($scope.name);
    }

    $scope.name = $scope.lower();

    console.log($scope.name);
    console.log($scope.lower());


}]);

Console will output values upon initializing but not after user make changes.

Answer

You need to watch the scope variable:

$scope.$watch('name', function() {
    console.log($scope.name);
});

More information: https://stackoverflow.com/a/15113029/5787736