Angular cannot set property of undefined

Question

I can't quite figure out why the following isn't working:

main.html

<div class="MainCtrl">
  <h1>{{message.test}}</h1>
</div>

main.js

angular.module('myApp')
  .controller('MainCtrl', function(someService, $location, $scope) {

    $scope.message.test = "blablabla";

  }
});

When I run the code I can an error that states:

TypeError: Cannot set property 'test' of undefined at new (http://localhost:9000/scripts/controllers/main.js:13:25) at invoke (http://localhost:9000/bower_components/angular/angular.js:4473:17) at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4481:27) at http://localhost:9000/bower_components/angular/angular.js:9108:28 at $route.link (http://localhost:9000/bower_components/angular-route/angular-route.js:977:26) at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8746:9) at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8246:11) at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7637:13) at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:7512:30) at name.$get.boundTranscludeFn (http://localhost:9000/bower_components/angular/angular.js:7656:16)

Clearly I'm missing something super obvious..

Paul Boutes · Accepted Answer · 2015-09-11 09:38:51Z

46

You're defining a property to an undefined object, you have to initialized your object before setting properties.

$scope.message = {};
$scope.message.test = 'bla';

answered Sep 11, 2015 at 9:38

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slomek · Accepted Answer · 2015-09-11 09:45:12Z

6

You should initialize your $scope.message object, but do it safely (just in case it's defined somewhere else, maybe in some circumstanes):

$scope.message = $scope.message || {}; 
$scope.message.test = "blablabla";

answered Sep 11, 2015 at 9:45

slomek

5,1763 gold badges19 silver badges16 bronze badges

1 Comment

Flavio Over a year ago

even after 7 yrs you solution works for me. your last seen was 2 yrs ago. Where ever you're, i wish you will find strength with each new day .

CodingIntrigue · Accepted Answer · 2015-09-11 09:49:03Z

4

message in your code is not an object, you must make it:

$scope.message = { test: 'blablabla' };

edited Sep 11, 2015 at 9:49

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

answered Sep 11, 2015 at 9:41

John V

8546 silver badges12 bronze badges

Comments

Tushar · Accepted Answer · 2015-09-11 09:44:13Z

2

your test does not exist inside a message, you need to do $scope.message = {}; before , $scope.message.test = "blablabla";

edited Sep 11, 2015 at 9:44

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Sep 11, 2015 at 9:40

macrog

2,0951 gold badge23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular cannot set property of undefined

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related