angularjs $scope variable set in $http.jsonp not available in .html

Question

I have a web app I'm experimenting with to learn angularjs. The app allows the user to submit a web form with a bible book, chapter, and starting verse and ending verse and retrieve the verses from a jsonp API source from labs.bible.org.

Here is my controller:

bibleMemorizerApp.controller('LookupCtrl', function($scope, $http) {

$scope.lookup = function() {
$scope.scriptures = [];
var book = $scope.passage.book;
var chapter = $scope.passage.chapter;
var verse_start = $scope.passage.verse_start;
var verse_end = $scope.passage.verse_end;
var source_url = 'http://labs.bible.org/api/?passage=' + book + '%20' + chapter + ':' + verse_start + '-' + verse_end + '&type=json&callback=JSON_CALLBACK'

$http({
    method: 'JSONP',
    url: source_url
  }).success(function ( data, status, headers, config) {
    $scope.scriptures = data;
    console.log("Success! status:" + status);
    console.log($scope.scriptures);
  }).error(function ( data, status, headers, config) {
  console.log("The JSONP request failed with status code:" + status );
});
};

Here is my web page:

<div ng-controller="LookupCtrl">
    <form name="lookupForm" novalidate class="lookupForm" ng-controller="LookupCtrl">
    <label>Book</label> : <input type="text" name="book" ng-model="passage.book" required><br/>
    <label>Chapter</label> : <input type="text" name="chapter" ng-model="passage.chapter" required><br/>
    <label>Starting Verse</label> : <input type="text" name="verse_start" ng-model="passage.verse_start" required><br/>
    <label>Starting End</label> : <input type="text" name="verse_end" ng-model="passage.verse_end" required><br/>
    <button ng-click="lookup()">Search</button>
</form>

<ul>
    <li ng-repeat="scripture in scriptures">{{scripture.text}}</li>
</ul>

The API seems to be successfully returning the jsonp request. Example:

angular.callbacks._0([{"bookname":"John","chapter":"3","verse":"2","text":"came to Jesus at night and said to him, \u201cRabbi, we know that you are a teacher who has come from God. For no one could perform the miraculous signs that you do unless God is with him.\u201d"},{"bookname":"John","chapter":"3","verse":"3","text":"Jesus replied, \u201cI tell you the solemn truth, unless a person is born from above, he cannot see the kingdom of God.\u201d"},{"bookname":"John","chapter":"3","verse":"4","text":"Nicodemus said to him, \u201cHow can a man be born when he is old? He cannot enter his mother\u2019s womb and be born a second time, can he?\u201d <a style=\"\" target=\"_blank\" href=\"http:\/\/bible.org\/page.php?page_id=3537\">&copy;NET<\/a>"}])

However, I seem to not be able to get the scriptures.text variable to populate the text on the page in the {{scripture.text}}

Any ideas?

UPDATE: Added output from console.log(data)

    event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js:3345
Success! status:200 main.js:67
[Object, Object, Object]
0: Object
bookname: "John"
chapter: "3"
text: "For this is the way God loved the world: He gave his one and only Son, so that everyone who believes in him will not perish but have eternal life."
verse: "16"
__proto__: Object
1: Object
bookname: "John"
chapter: "3"
text: "For God did not send his Son into the world to condemn the world, but that the world should be saved through him."
verse: "17"
__proto__: Object
2: Object
bookname: "John"
chapter: "3"
text: "The one who believes in him is not condemned. The one who does not believe has been condemned already, because he has not believed in the name of the one and only Son of God. <a style="" target="_blank" href="http://bible.org/page.php?page_id=3537">&copy;NET</a>"
verse: "18"
__proto__: Object
length: 3
__proto__: Array[0]

try moving $scope.scriptures = []; outside of function so it is defined within scope when controller initializes and thus angular will be watching it. Are you getting data in console from success handler log? — charlietfl
– charlietfl, Commented Nov 25, 2013 at 4:50
OK. I tried to move $scope.scriptures = []; outside the function. No change in behavior. I am getting data in the console: Success! status:200.I am also logging the console.log($scope.scriptures) which shows in the log as an object array that when expanded shows the individual json elements. — acoustic_north
– acoustic_north, Commented Nov 25, 2013 at 5:17
added output from console.log(data). Will create a demo plunker too — acoustic_north
– acoustic_north, Commented Nov 25, 2013 at 20:36

Daniel Tabuenca · Accepted Answer · 2013-11-25 22:01:56Z

2

Your problem is you are defining two 'LookupCtrl' controllers. One is outside the form:

<div ng-controller="LookupCtrl">

One is in the form itself:

<form name="lookupForm" novalidate class="lookupForm" ng-controller="LookupCtrl">

Your ng-click is setting the $scope.scriptures on the scope related to the LookupCtrl in the form, which hides the outer one.

Your {{scripture.text}} is outside of the form, which means it's using the scope associated with the contorller on the div. Which is still blank because the ngiclick didn't touch that scope (it touched the one in the form).

answered Nov 25, 2013 at 22:01

Daniel Tabuenca

13.7k3 gold badges40 silver badges43 bronze badges

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

1 Comment

acoustic_north Over a year ago

That's it! Thank you for the explanation and solution. I confirmed that removing the ng-controller declaration in the form fixes the problem.

Collectives™ on Stack Overflow

angularjs $scope variable set in $http.jsonp not available in .html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related