Mad-D Mad-D - 8 months ago 47
Javascript Question

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.


<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<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="" />
<script src=""></script>
<script src=""></script>
<script src=""></script>

<!-- custom angular script -->
<script src="js/app.js"></script>
<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>


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

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

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

$ = $scope.lower();



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

enter image description here

Answer Source

You need to watch the scope variable:

$scope.$watch('name', function() {

More information: