title: angularjs, select, add option
body: <p>I am trying to add an option to a select element. The value is being given by a user form in a jquery ui modal.</p>
  
  <p>When I use Chrome Developer tools, I can see that the bound object array is indeed getting the new object, but it's not showing up in the select element.</p>
  
  <p>I used $('#company').scope().vendors in the console to bring up the array. It shows items being added to the array, but they aren't showing in the select box.</p>
  
  <p>Here is what I have:</p>
  
  <p>app.js</p>
  
  <pre><code>app.factory('Vendors', function(){
      var Vendors = {};
  
      Vendors.list = [
      {
          id: 1,
          name: 'Company 1'
      },
      {
          id: 2,
          name: 'Company 2'
      },
      {
          id: 3,
          name: 'Company 3'
      }
      ]
  
      return Vendors;
  })
  
  app.controller('companyCtrl', function($scope, Vendors){
      $scope.vendors = Vendors;
  
      $scope.selectedVendor = 0;
  
      $scope.companySelect = function(){
          alert("You chose " + $scope.selectedVendor.name)
      }
  
      $scope.addCompany = function(name){
          var maxId = 0;
  
          for(var i=0; i&lt;$scope.vendors.list.length; i++){
              maxId = $scope.vendors.list[i].id;
          }
  
          newVendor = {id:++maxId, name:name};
  
          $scope.vendors.list.push(newVendor)
          $scope.selectedVendor = newVendor;
      }
  })
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="grid_12" ng-controller="companyCtrl" id="company"&gt;
          &lt;span&gt;Company&lt;/span&gt;
          &lt;select ng-model="selectedVendor" ng-change="companySelect()" ng-options="v.name for v in vendors.list"&gt;
              &lt;option value=""&gt;-- Choose Company --&lt;/option&gt;
          &lt;/select&gt;
          &lt;small&gt;&lt;button onclick="openModal('addCompany');"&gt;Add&lt;/button&gt;&lt;/small&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Inline JS</p>
  
  <pre><code>    $( "#addCompany" ).dialog({
          autoOpen: false,
          width: 350,
          modal: true,
          buttons: {
              "Create new company": function() {
                  var name = $('#name').val();
  
                  if(name != ''){
                      $('#company').scope().addCompany(name);
                  }
  
                  $( this ).dialog( "close" );
              },
              Cancel: function() {
                  $( this ).dialog( "close" );
              }
          },
          close: function() {
              $('#name').val( "" );
          }
      });
  
      function openModal(id){
          $('#'+id).dialog('open');
      }
  </code></pre>
  
  <p>I tried creating a jsFiddle, but I guess I'm not too sure how to get everything on there to work yet. But here is my try anyway: <a href="http://jsfiddle.net/aPXxe/" rel="nofollow">http://jsfiddle.net/aPXxe/</a></p>