New to angular and have a page in which I have the app and controller defined. After the controller, I am trying to display a value I get back from a Node Rest call (which I get correctly). If I put {{1+1}} i get a value... I do not get a value for {{test}} or {{stock.symbol}}. I do see them in the scope variable in firebug .... Not sure what I am doing wrong with the definition of the module. Any help would be appreciated! Code snippets below ...
HTML
=====
<html lang="en" ng-app="tradingSystem">
..
..
{% block content %}
{% include "includes/carousel.html" %}
<div class="container" ng-controller="StockListCtrl">
<h3>Test: {{ test }} </h3>
<h3>Symbol: {{ stock.symbol }}</h3>
{% block content %}
{% include "includes/carousel.html" %}
<div class="container" ng-controller="StockListCtrl">
<h3>Test: {{ test }} </h3>
<h3>Symbol: {{ stock.symbol }}</h3>
App.JS
=======
'use strict';
/* App Module */
var tradingSystem = angular.module('tradingSystem', [
'ngRoute',
'tradingSystemAnimations',
'tradingSystemControllers',
'tradingSystemFilters',
'tradingSystemServices'
]);
controllers.js
=============
'use strict';
/* Controllers */
var app = angular.module('tradingSystem', []);
app.controller('LoginCtrl', ['$scope', 'User', function($scope, User) {
$scope.authenticate = function (user)
{
$scope.user = User.authenticate({emailAddress: user.emailAddress, password: user.password});
alert("Received " + $scope.user);
};
}]);
app.controller('StockListCtrl', ['$scope', '$http', function($scope, $http) {
$scope.test = 'This is a test';
$http.get('/api/stocks')
.success(function (stocks) {
if (!stocks) {
console.log("No results from api/stocks service ");
}
else
{
$scope.stocks = stocks;
console.log("Results: " + stocks);
console.log("Stocks Fetched: " + $scope.stocks.length)
$scope.stock = stocks[0];
console.log("Scope: " + $scope);
alert(stocks[0].symbol);
console.log($scope);
}
})
.error(function (reason) {
alert(reason);
});
}]);
