CODEWITHSUNDEEP
javascriptangularjsdata-binding
Miha Šušteršič
Miha Šušteršič

Reputation: 10042

Angular app not displaying $scope data

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.

Upvotes: 1

Views: 187

Answers (3)

Yogesh
Yogesh

Reputation: 1585

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

Upvotes: 0

anujayk
anujayk

Reputation: 584

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.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

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>

Upvotes: 4

Related Questions