Send data to view from controller function in AngularJS

Question

I'm a little new to Angular, and I think I'm missing a key step in sending data from the controller to be able to display in my view.

The functionality I'm looking to create is that a user inputs search requirements into a form and clicks the submit button. Clicking the submit button fires a function in the controller (getQuote()), which makes an API call and returns the API response to be displayed in the view the form redirects to. I've been able to have my function print the response to the console successfully, but the view remains blank.

Here is my code:

Jade template for search form

div(ng-controller="StockCtrl")
    form(action="/#/stock/quote")
        div(class="form-group")
            h3 Enter your stock symbol
            input(type="text" placeholder="AAPL ..." class="form-control input-lg" ng-model="formData.symbol")
            br
            h3 What time period are you interested in?
            input(type="date" id="startdate" class="form-control input-lg" ng-model="formData.startdate")
            br
            button(type="submit" class="btn btn-primary btn-lg" ng-click="getQuote()") Compare

Controller

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

stockrControllers.controller('StockCtrl', ['$scope', '$http', '$routeParams',
    function ($scope, $http, $routeParams) {

  $scope.stockData = [];
  $scope.formData = [];

  $scope.getQuote = function(startdate){
    var symbol = $scope.formData.symbol;
    var startdate = new Date($scope.formData.startdate);
    var startday = startdate.getDate();
    var startmonth = startdate.getMonth() + 1;
    var startyear = startdate.getFullYear();
    var enddate = new Date(startdate);
    enddate.setDate(startday + 5);
    var endday = enddate.getDate();
    var endmonth = enddate.getMonth() + 1;
    var endyear = enddate.getFullYear();

    //format dates to work with API call
    startdate = startyear + "-" + startmonth + "-" + startday;
    var enddate = endyear + "-" + endmonth + "-" + endday;

    $http({
      method: 'GET',
      url: 'api/stock/' + symbol + '/' + startdate + '/' + enddate
    }).then(function successCallback(response) {
        $scope.stockData = response;
        console.log($scope.stockData);
      }, function errorCallback(response) {
        console.log('Error:' + response);
    });

  };

}]);

Jade template for view to print data

h1 Stock Data

div(ng-controller="StockCtrl")
    div(ng-repeat="stock in stockData")
        p stock data: {{stock}}

When I don't have my API calls wrapped in a function, and instead just use an if statement (like if($scope.formData){..}), I can display the API response just fine in the view. However, putting the call in a function however is preventing the data from making it to the page.

Answer 1

You have declared two separate div(ng-controller="StockCtrl") and each one has it's own $scope. If you merge them into a single div, then $scope.stockData will be visible:

div(ng-controller="StockCtrl")
    form(action="/#/stock/quote")
        div(class="form-group")
            h3 Enter your stock symbol
            input(type="text" placeholder="AAPL ..." class="form-control input-lg" ng-model="formData.symbol")
            br
            h3 What time period are you interested in?
            input(type="date" id="startdate" class="form-control input-lg" ng-model="formData.startdate")
            br
            button(type="submit" class="btn btn-primary btn-lg" ng-click="getQuote()") Compare

    div(ng-repeat="stock in stockData")
        p stock data: {{stock}}

Answer 2

response.data contain actual contents. so try replacing your api call code as shown below

$http({
      method: 'GET',
      url: 'api/stock/' + symbol + '/' + startdate + '/' + enddate
    }).then(function successCallback(response) {
        $scope.stockData = response.data;
        console.log($scope.stockData);
      }, function errorCallback(response) {
        console.log('Error:' + response);
    });