current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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.

enter image description here

share|improve this question
up vote 3 down vote accepted

You need to watch the scope variable:

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

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

share|improve this answer
up vote 3 down vote

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);
share|improve this answer
up vote 2 down vote

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);        
}
share|improve this answer
    
@Carlton, beat me by seconds. :-) – Drew Delano Feb 16 at 23:10
    
Nice answer :-) – Carlton Feb 16 at 23:12
up vote 1 down vote

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>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.