Values defined in controller not being displayed

kevin_sang · October 21, 2015, 1:23am

In the browser, only the raw code is being displayed (e.g. “{{ program.series }}”.

Code:

MainController.js

app.controller('MainController', ['$scope', function($scope) {
  $scope.program = {
    series: "Sherlock",
    series_img: "img/sherlock.jpg",
    genre: "Crime drama",
    season: 3,
    episode: "The Empty Hearse",
    description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared     of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
    datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
  };
}]);

relevant index.html

<div class="main" ng-controller="MainController">
  <div class="container">
    <div class="content">
      <div class="row">
        
        <div class="col-md-3" class="series_img" ng-src="{{ program.series_img }}">
        </div>
        
        <div class="col-md-6">
          <h1 class="series">{{ program.series }}</h1>
          <h2 class="episode">{{ program.episode }}</h2>
          <p class="description">{{ program.description }}</p>
        </div>

        <div class="col-md-3">
          <ul class="list-group">
            <li class="list-group-item"><span>Date:</span>{{ program.datetime |  date:'mediumDate' }} </li>
            <li class="list-group-item"><span>On air:</span>{{ program.dateTime | date:'EEEE' }} </li>
            <li class="list-group-item"><span>Time:</span>{{ program.dateTime | date:'shortTime' }}  </li>
            <li class="list-group-item"><span>Season:</span>{{ program.season }}  </li>
            <li class="list-group-item"><span>Genre:</span>{{ program.genre }}  </li>
          </ul>
        </div>
        
      </div>
    </div>
  </div>
</div>

dataninja08325 · October 21, 2015, 8:44am

Maybe your problem is not in this “relevant” code.

Maybe you didn’t include ng-app in your body, or you made a spelling mistake on the name of your app, or maybe you didn’t include the script stuff at the end of your index.html.

pysurfer16448 · October 21, 2015, 6:59pm

I’m having the same problem. I checked all of your suggestions ninja, but everything looks right.

codewhiz04433 · October 22, 2015, 10:41am

What I did wrong was I added these brackets to the $scope.program as that was what was in the learning exercise. Once I took those brackets out it displayed fine.

c1trusfru1t · October 22, 2015, 12:41pm

That worked for me too. Thanks!

tpasto · October 22, 2015, 1:35pm

Thank you that was the same issue I was having with the . emulated the exercise and the solution here was not the same expected.

Thanks!

aaronwinters916 · October 23, 2015, 5:20am

I’m having the same issue across all 3 exercises. On Bolt 1 I actually do get the bracketed variables. I tried deleting the square brackets from controller and no change. (You’d think it would break if anything) In the following 2 I just get the bracketed elements very quickly, then it goes to blank.

Could there be an issue with the browser emulator caching the old data? Super frustrating to have everything in order and have no feedback like I’m used to in other Codecademy courses.

jonthomas · October 23, 2015, 4:20pm

I’m with these guys. I absolutely can’t get the values to display in the browser. I only get the raw, unparsed expressions.

devslayer49345 · October 23, 2015, 9:25pm

Make sure the module and the controller are connected.

The name of the variable (“var”) in the app module has to equal the name of the app that comes before “.controller” on the controller. For example, if the module is written out as var myApp = angular.module(‘BoltNetworkApp’, ); Then the controller should read like myApp.controller… etc.

jonthomas · October 23, 2015, 9:49pm

Hmmm, from what I can tell, that is the case.

In app.js I have

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

And my controller is set up like this:

app.contoller... etc

minhaj_shaik · October 24, 2015, 12:17am

I faced same issue and made it work by following changes/edits
app.js

var BoltNetworkApp = angular.module(‘BoltNetworkApp’, );
MainController.js

BoltNetworkApp.controller(‘MainController’, function ($scope) {
$scope.program = {
series: “Sherlock”,
series_img: “img/1.jpeg”,
genre: “Crime drama”,
season: 3,
episode: “The Empty Hearse”,
description: “Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft’s help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.”,
datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
}
});
index.html

Date: {{program.datetime | date}}

On air: {{program.datetime | date:‘EEEE’}}

Time: {{program.datetime | date:‘shortTime’}}

dataninja08325 · October 27, 2015, 4:09pm

if you really wrote

maybe that’s the problem

jonthomas · October 27, 2015, 4:22pm

Lol, yes. That would certainly cause a problem. But I didn’t literally write that.

bcuz · November 5, 2015, 12:33pm

I initially had some trouble getting values to show up. My problem was that I only used a single pair of curly braces for my expressions. Sometimes it helps to start the project over: Get Help -> I want to restart this project -> Reset project

mallika.muddastudent · December 26, 2015, 11:03am

I have similar issue. Can not get expected results. Can some please help here what is wrong with my code

Module definition:
var app = angular.module(‘BoltNetworkApp’, );

controller:
app.controller(‘MainController’, [’$scope’, function($scope) {
$scope.program {
series: “Sherlock”,
series_img: “img/sherlock.jpg”,
genre: “Crime drama”,
season: 3,
episode: “The Empty Hearse”,
description: “Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft’s help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.”,
datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
}
}
]);

View:

<div class="main" ng-controller="MainController">
  <div class="container">
    <div class="content">
      <div class="row">
        
        <div class="col-md-3" class="series_img">
        </div>
        
        <div class="col-md-6">
          <h1 class="series"></h1>
          <h2 class="episode"></h2>
          <p class="description"></p>
        </div>

        <div class="col-md-3">
          <ul class="list-group">
            <li class="list-group-item"><span>Date:</span> {{ program.datetime | date:'mediumDate' }}</li>
            <li class="list-group-item"><span>On air:</span> {{ program.datetime | date:'EEEE' }}  </li>
            <li class="list-group-item"><span>Time:</span> {{ program.datetime | date:'shortTime' }}  </li>
            <li class="list-group-item"><span>Season:</span> {{ program.season }}  </li>
            <li class="list-group-item"><span>Genre:</span> {{ program.genre }} </li>
          </ul>
        </div>

amarfahmy · December 28, 2015, 6:22pm

Hey Mallika. Did you manage to fix this exercise? Im having the same problem that only the raw code is displaying eg {{ program.series }} etc.

haveachillworkday · January 22, 2016, 11:47pm

i had the same issue and it was frustrating! i got it working thanks to dev support. the problem was i put a semi colon after the closing bracket of my object, $scope.program. these semi colons are only used when you have a property written after it. example:

BROKEN

$scope.program = {
series: “Sherlock”,
series_img: “img/sherlock.jpg”,
genre: “Crime drama”,
season: 3,
episode: “The Empty Hearse”,
description: “Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft’s help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.”,
datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
},

WORKING

$scope.program = {
series: “Sherlock”,
series_img: “img/sherlock.jpg”,
genre: “Crime drama”,
season: 3,
episode: “The Empty Hearse”,
description: “Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft’s help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.”,
datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
}

dannawhaha · January 27, 2016, 7:11am

I have a same problem.

{{picture.info}}

{{picture.desc}}

and controller is .controller('slider', function($scope) { $(document).ready(function(){ $('.slider').slider({full_width: true}); }); $(document).ready(function(){ $('.parallax').parallax(); }) $scope.pictures=[ { img:"img/workPix/1st.jpg", info:" ", desc:" " }, { img:"img/workPix/2012-oyu.jpg", info:"Transmission Line", desc:" " }, { img:"img/workPix/20120929_092154.jpg", info:" ", desc:" " } ] ;})

klwahl · April 11, 2016, 5:05pm

That was it!! Thank you

bitsolver25224 · May 1, 2017, 7:53am

I had the same issue. Removing square brackets solved the problem.

Values defined in controller not being displayed

{{picture.info}}

{{picture.desc}}