Angular app not displaying $scope data

Question

I'm trying to setup a basic angular app to test some translation logic and somehow I can't get my data to display on the frontend.

Here's my html:

<div ng-app="testApp">
  <div ng-controller="myController">
    <p >{{ title }}</p>
    <p >{{ text }}</p>
  </div>
</div>

And my JS:

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

testApp.controller('myController', function ($scope) {
  $scope.data = {
    title: 'PAGE_TITLE',
    text :'some random page text'
  };
});

I've created a codepen, added reset.css, jQuery and AngularJS as depedencies, but can't figure out what I'm doing wrong.

Any help appreciated.

It should be {{data.title}} & {{data.text}}

Pankaj Parkar
– Pankaj Parkar

2016-01-07 08:59:32 +00:00
Commented Jan 7, 2016 at 8:59 — Pankaj Parkar
– Pankaj Parkar, Commented Jan 7, 2016 at 8:59
ugh. thx a lot, write it up as an answer and I'll accept it

Miha Šušteršič
– Miha Šušteršič

2016-01-07 09:00:08 +00:00
Commented Jan 7, 2016 at 9:00 — Miha Šušteršič
– Miha Šušteršič, Commented Jan 7, 2016 at 9:00
i added an answer :)

Pankaj Parkar
– Pankaj Parkar

2016-01-07 09:03:10 +00:00
Commented Jan 7, 2016 at 9:03 — Pankaj Parkar
– Pankaj Parkar, Commented Jan 7, 2016 at 9:03

Pankaj Parkar · Accepted Answer · 2016-01-07 09:00:52Z

4

You should bind those property from data object as title and text belongs to that data object.

Markup

<div ng-app="testApp">
  <div ng-controller="myController">
    <p >{{ data.title }}</p>
    <p >{{ data.text }}</p>
  </div>
</div>

answered Jan 7, 2016 at 9:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

anujayk · Accepted Answer · 2016-01-07 09:02:10Z

0

You should always need to write the scope object whose property you need to print.

<div ng-app="testApp">
  <div ng-controller="myController">
    <p >{{ data.title }}</p>
    <p >{{ data.text }}</p>
  </div>
</div>

Try like this.

answered Jan 7, 2016 at 9:02

anujayk

5948 silver badges32 bronze badges

Comments

Yogesh · Accepted Answer · 2016-01-07 09:03:04Z

0

it should be {{data.title}} & {{data.text}}

answered Jan 7, 2016 at 9:03

Yogesh

1,5952 gold badges20 silver badges46 bronze badges

Collectives™ on Stack Overflow

Angular app not displaying $scope data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related