title: AngularJS select not updating model
body: <p>I'm slowly getting a headache here when working with the select dropdown element in AngularJS. I can pupulate the select box, but it doesn't update the model when an option has been selected.</p>
  
  <p>My service file looks like this (using mockup data for now):</p>
  
  <p><strong>orderService.js:</strong></p>
  
  <pre><code>app.service('orderService', function ($http) {
  this.getProductCategoriesWithProducts = function (userId) {
      return productsMockData();
  }
  });
  
  /* Mockup data functions */
  function productsMockData() {
  var category1 = {
      name: "test21",
      products: [
          {
              productId: "1",
              unitPrice: 200,
              description: "test21",
              size: "M/L",
              units: [
                  {
                      value: "KS",
                      name: "KS"
                  }
              ],
              selectedUnit: { value: "", name: "" },
              itemNumber: "109051",
              numOfSelectedItems: 0,
              userComment: "",
              linePrice: 0
          }
      ]
  };
  
  var category2 = {
      name: "test4",
      products: [
          {
              productId: "2",
              unitPrice: 100,
              description: "test4",
              size: "M/L",
              units: [
                  {
                      value: "KS",
                      name: "KS"
                  }
              ],
              selectedUnit: { value: "", name: "" },
              itemNumber: "109154",
              numOfSelectedItems: 0,
              userComment: "",
              linePrice: 0
          },
          {
              productId: "3",
              unitPrice: 100,
              description: "test",
              size: "M/L",
              units: [
                  {
                      value: "KS",
                      name: "KS"
                  },
                  {
                      value: "BOX",
                      name: "BOX"
                  }
              ],
              selectedUnit: { value: "", name: "" },
              itemNumber: "109152",
              numOfSelectedItems: 0,
              userComment: "",
              linePrice: 0
          },
          {
              productId: "4",
              unitPrice: 40,
              description: "asda",
              size: "M/L",
              units: [
                  {
                      value: "KS",
                      name: "KS"
                  }
              ],
              selectedUnit: { value: "", name: "" },
              itemNumber: "109151",
              numOfSelectedItems: 0,
              userComment: "",
              linePrice: 0
          }
      ]
  };
  
  var category3 = {
      name: "test45",
      products: [
          {
              productId: "5",
              unitPrice: 400,
              description: "sdfsfss",
              size: "M/L",
              units: [
                  {
                      value: "KS",
                      name: "KS"
                  }
              ],
              selectedUnit: { value: "", name: "" },
              itemNumber: "109331",
              numOfSelectedItems: 0,
              userComment: "",
              linePrice: 0
          }
      ]
  };
  
  var category4 = {
      name: "test65",
      products: [
          {
              productId: "6",
              unitPrice: 90,
              description: "asda",
              size: "M/L",
              units: [
                  {
                      value: "KS",
                      name: "KS"
                  }
              ],
              selectedUnit: { value: "", name: "" },
              itemNumber: "700107",
              numOfSelectedItems: 0,
              userComment: "",
              linePrice: 0
          }
      ]
  };
  
  var category5 = {
      name: "gdfd",
      products: [
          {
              productId: "7",
              unitPrice: 90,
              description: "asda",
              size: "Past.prod",
              units: [
                  {
                      value: "KS",
                      name: "KS"
                  }
              ],
              selectedUnit: { value: "", name: "" },
              itemNumber: "900192",
              numOfSelectedItems: 0,
              userComment: "",
              linePrice: 0
          }
      ]
  };
  
  var array = [];
  array.push(category1);
  array.push(category2);
  array.push(category3);
  array.push(category4);
  array.push(category5);
  
  return array;
  </code></pre>
  
  <p>}</p>
  
  <p>My <strong>orderController.js</strong> looks like this:</p>
  
  <pre><code>app.controller('orderController', function ($scope, $timeout, orderService, $filter) {
  // Constructor for this controller
  init();
  
  function init() {
      $scope.selected = {};
      $scope.products = orderService.getProductCategoriesWithProducts(1234);
      console.log($scope.products);
      $scope.orderLines = [];
      $scope.totalSum = 0.00;
      $scope.shippingDate = "";
      $scope.shippingAddress = "";
      $scope.user = {};
      $scope.orderComment = "test";
  }
  
  $scope.calculateLinePrice = function (product) {
      product.linePrice = product.numOfSelectedItems * product.unitPrice;
  }
  
  $scope.calculateTotalPrice = function () {
  
  }
  });
  </code></pre>
  
  <p>And my <strong>view</strong> looks like this:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr ng-repeat="product in productCategory.products"&gt;                         
      &lt;td&gt;{{ product.description }}&lt;/td&gt;
      &lt;td&gt;{{ product.size }}&lt;/td&gt;
      &lt;td&gt;
          &lt;select ng-model="product.units.selectedUnit" 
                  ng-options="u.value as u.name for u in product.units"
                  ng-init="u = product.units[1].name"&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When I take a look at the element inspector in Google Chrome, the options which is output looks like this:</p>
  
  <pre><code>&lt;option value="?" selected="selected"&gt;&lt;/option&gt;
  &lt;option value="0"&gt;KS&lt;/option&gt;
  </code></pre>
  
  <p>The main issue (I think) with this is, that I don't full understand what is going on in the select angular code:</p>
  
  <pre><code>&lt;select ng-model="product.units.selectedUnit" 
          ng-options="u.value as u.name for u in product.units"
          ng-init="u = product.units[1].name"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Having read the AngularJS documentation about select and ng-options as well as several examples when doing a search, I don't get it :-(</p>
  
  <p>I hope someone can point me in the right direction on this.</p>
  
  <p>Thanks a lot in advance!</p>
  
  <p><strong>UPDATE with solution</strong></p>
  
  <p>It was fairly basic, I guess a 5 minute break away from it was needed ;-) It for the model binding it was a typo:</p>
  
  <pre><code>&lt;select ng-model="product.units.selectedUnit" ..
  </code></pre>
  
  <p>Should read:</p>
  
  <pre><code>&lt;select ng-model="product.selectedUnit" ..
  </code></pre>
  
  <p>and (thanks to Zack) the ng-init="" should read:</p>
  
  <pre><code>ng-init="product.selectedUnit = product.units[0]"
  </code></pre>