console.log for $scope in angular js

Question

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

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/bootstrap.min.css" />    
            <!-- CDN lib files -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.min.js"></script>    

            <!-- custom angular script -->
            <script src="js/app.js"></script>  
    </head>
     <body>
        <div class="container">
            <div ng-controller="mainController">
                <h1>Hello world!</h1>
                <label> Please enter something</label>
                <input textarea ng-model="name"></input>
                <h4> This is what you entered : {{ name }} </h4>
                <h4 style=color:red> now filtering: {{ lower() }}</h4>
            </div>
        </div>
    </body>
</html>

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.

On screen model is changing due to two-way data binding where scope is being watched. But in case of console.log(), you need to set watcher manually if you want it to console to model value. — Rahul Jha, May 29 '17 at 13:53

score 8 · Accepted Answer · edited May 23 '17 at 12:32

8

You need to watch the scope variable:

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

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

edited May 23 '17 at 12:32

Community

1
1

answered Feb 16 '16 at 23:09

Carlton

838
6
16

score 3 · Answer 2 · answered Feb 16 '16 at 23:13

3

Just a more "functional" version. Everyone is right, you are logging the observable, not what was observed. What you want is for console.log to be called on each change to $scope, not called once (as you have it now).

$scope.$watch("name", console.log);

answered Feb 16 '16 at 23:13

Fresheyeball

29,567
20
102
164

score 2 · Answer 3 · answered Feb 16 '16 at 23:09

2

You're logging only from the constructor. If you want to log each time something changes, consider a watch:

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

answered Feb 16 '16 at 23:09

Drew Delano

1,421
16
21

@Carlton, beat me by seconds. :-) – Drew Delano Feb 16 '16 at 23:10

score 1 · Answer 4 · answered Feb 16 '16 at 23:11

Why would you expect a controller to be rerendered when a scope variable changes? You can use scope watchers or input event listeners to listen for changes.

Here's an example with a watcher:

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());
  
    $scope.$watch('name', function() {
        console.log($scope.name);
        console.log($scope.lower());
    });

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" class="container">
  <div ng-controller="mainController">
    <h1>Hello world!</h1>
    <label>Please enter something</label>
    <input textarea ng-model="name" />
    <h4> This is what you entered : {{ name }} </h4>
    <h4 style=color:red> now filtering: {{ lower() }}</h4>
  </div>
</div>

console.log for $scope in angular js

4 Answers4