title: 2 Controllers In 1 View - Data Not Submitting From Form
body: <p>I have a problem that I'm not sure how to resolve. I have a single page application where the controllers are being handled by routeProvider. Within one of the view files (order.html), I would like to bring in data from another controller (customersController) and use it in a select/option drop down menu. However, since I'm calling another controller directly in the view file, the customersController is overriding the ordersController and thus, is preventing the ng-model from being seen by the ordersController. My problem is, whenever I submit a new order, the order.name does not get passed into the scope. Order.quantity and order.product show up just fine.</p>
  
  <p>Here is the orders.html view page:</p>
  
  <pre><code>&lt;h2&gt;Add New Order&lt;/h2&gt;
  &lt;form&gt;
      &lt;label for="name"&gt;Customer&lt;/label&gt;
      &lt;select name="name" ng-model="order.name" ng-controller="customersController" ng-options="customer.name for customer in customers"&gt;
      &lt;/select&gt;
      &lt;label for="quantity"&gt;Order&lt;/label&gt;
      &lt;select name="quantity" ng-model="order.quantity"&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
          &lt;option value="4"&gt;4&lt;/option&gt;
          &lt;option value="5"&gt;5&lt;/option&gt;
      &lt;/select&gt;
      &lt;select name="product" ng-model="order.product"&gt;
          &lt;option value="Nike Shoes"&gt;Nike Shoes&lt;/option&gt;
          &lt;option value="Black Belts"&gt;Black Belts&lt;/option&gt;
          &lt;option value="Ice Creams"&gt;Ice Creams&lt;/option&gt;
          &lt;option value="Candies"&gt;Candies&lt;/option&gt;
          &lt;option value="Waffles"&gt;Waffles&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="submit" value="Order" ng-click="addOrder()"&gt;
  &lt;/form&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;Customer Name&lt;/td&gt;
              &lt;td&gt;Product&lt;/td&gt;
              &lt;td&gt;Quantity&lt;/td&gt;
              &lt;td&gt;Date&lt;/td&gt;
              &lt;td&gt;Action&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="order in orders"&gt;
              &lt;td&gt;{{ order.name }}&lt;/td&gt;
              &lt;td&gt;{{ order.product }}&lt;/td&gt;
              &lt;td&gt;{{ order.quantity }}&lt;/td&gt;
              &lt;td&gt;{{ order.date }}&lt;/td&gt;
              &lt;td&gt;&lt;a href="#/" ng-click="deleteOrder(order._id)"&gt;Remove&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Now one way to solve this issue is by injecting the customersFactory into the ordersController but I am not sure if this is the proper way of solving this issue. It seems like a cheap band aid fix since every time the ordersController is used, it will now contain the customersFactory. That kind of defeats the purpose of having a multiple controllers since I can just inject a generic controller with a bunch of factories.</p>
  
  <p>Any suggestions or ideas on what I can do? Thanks in advance.</p>