title: AngularJS- some of my scope variables not displaying
body: <p>I'm a new developer using Angular JS to create an orders page for an app I created in Ruby on Rails.  I would like to get a few Angular variables to display: </p>
  
  <ul>
  <li>order.id <em>(displays)</em></li>
  <li>order.user.email <em>(does not display)</em></li>
  <li>order.total <em>(does not display)</em></li>
  <li>order.product.name <em>(displays)</em></li>
  </ul>
  
  <p>Only 2 of the 4 variables display.  When I put a string or integer into the {{}} Angular notation in place of <em>order.total | currency</em>, the string or integer displays.  However, when I try the same with <em>order.product.name</em>, nothing happens. </p>
  
  <p>Here is my relevant code:  </p>
  
  <p>View.html:</p>
  
  <pre><code>&lt;div ng-controller="OrdersCtrl"&gt;
  &lt;h1&gt;Orders&lt;/h1&gt;
  &lt;div class="container"&gt;
      &lt;form class="form-inline" ng-submit="addOrder()"&gt;
          &lt;strong&gt;Add Order: &lt;/strong&gt;
          &lt;select ng-model="newOrder.product_id" class="form-control"&gt;
              &lt;option value="" disabled selected&gt;Select a Product&lt;/option&gt;
              &lt;option ng-repeat="product in products" value="{{product.id}}"&gt;    {{product.name}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="number" step="1" class="form-control" placeholder="Total" ng-model="newOrder.total"&gt;
          &lt;input type="number" class="form-control" ng-model="newOrder.product_id"&gt;
          &lt;input type="submit" value="+" class="btn btn-success"&gt;
      &lt;/form&gt;
  
    &lt;table class="table table-hover"&gt;
      &lt;thead&gt;
          &lt;td&gt;Order ID&lt;/td&gt;
          &lt;td&gt;Total&lt;/td&gt;
          &lt;td&gt;Product&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/thead&gt;
      &lt;tr ng-repeat="order in orders | orderBy:'-id':reverse"&gt;
          &lt;td&gt;
              {{order.id}}&lt;small ng-show="order.user_id"&gt;&lt;br&gt;-{{order.user.email}}&lt;/small&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;strong&gt;{{order.total | currency}}&lt;/strong&gt;
          &lt;/td&gt;
          &lt;td&gt;
              {{order.product.name}}
          &lt;/td&gt;
          &lt;td&gt;
              &lt;button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"&gt;&lt;span class="glyphicon glyphicon-trash" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Controller (app.js)</p>
  
  <pre><code>var app = angular.module('shop', ['ngResource']);
  //Workaround to get Angular running
  $(document).on('ready page:load', function() {
  angular.bootstrap(document.body, ['shop'])
  });
  //factory for models
  app.factory('models', ['$resource', function($resource){
  var orders_model = $resource("/orders/:id.json", {id: "@id"});
  var products_model = $resource("/products/:id.json", {id: "@id"});
  var x = {
      orders: orders_model,
      products: products_model
  };
  return x;
  }]);
  //connect app to OrdersCtrl controller
  app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){
  // Here will be all code belonging to this controller
  $scope.orders = models.orders.query();
  $scope.products = models.products.query();
  //add new orders
  $scope.addOrder = function(){
      //only orders with product id or zero total gets added
      if(!$scope.newOrder.product_id || $scope.newOrder.total === ''){      return; }
      //Order can be submitted if product_id and total are filled out
      order = models.orders.save($scope.newOrder, function(){ //POST
          recent_order = models.orders.get({id: order.id});
          $scope.orders.push(recent_order);
          $scope.newOrder = '';
      });
  }
  //delete orders
  $scope.deleteOrder = function(order){
      models.orders.delete(order);
      $scope.orders.splice($scope.orders.indexOf(order), 1);
  };
  }]);
  </code></pre>