title: Angular with directive select and submit
body: <p>Angular creation of a blank option in select can be very tiresome. Any solutions for this:</p>
  
  <pre><code>angular.module('myApp', ['ui.bootstrap','angularSpinners'])
  .controller("StudentController",function($scope,$http,$modal){
     $scope.students=[
       {"first_name":"Miguel","last_name":"Smith","id":10},
       {"first_name":"Ann","last_name":"Jones","id":11}
     ];
     $scope.courselist=[
        {"first_name":"Dave","last_name":"Smith","id":8},
        {"first_name":"Mike","last_name":"Winner","id":9}
     ];
     $scope.sDefault=$scope.courselist[0].id;
  
  })
  .directive('thisView', function() {
     return {
       restrict:"E",
       scope: {
         students:"=",
         courselist:"=",
         sDefault:"="
     },
     templateUrl: 'this-view.html',
     controller: function($scope) {
        $scope.remStudent = function(remId) {
           $scope.students.splice( $.inArray(remId, $scope.students), 1 );
           $scope.courselist.push(data);//data will be returned from http not relevant for question
       };
       $scope.addStudent = function(addId) {//this from student list
          $scope.students.push(data);//data will be returned from http not relevant for question
          $scope.courselist.splice( $.inArray(addId, $scope.courselist), 1 );
       };     
     }
  });
  </code></pre>
  
  <p>On main page:</p>
  
  <pre><code>&lt;div ng-controller="StudentController"&gt;
     {{sDefault}}  //works
     &lt;this-view students="students" courselist="courselist" sDefault="sDefault"&gt;&lt;/this-view&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>this-view.html:</p>
  
  <pre><code>   {{sDefault}} //doesn't work
  
  &lt;form ng-submit="addStudent(addStudentId)"&gt;
             &lt;select  class="form-control" ng-model="addStudentId" &gt;
                  &lt;option value="" selected&gt;Default&lt;/option&gt;
                   &lt;option  ng-repeat="option in courselist" value="{{option.id}}" &gt;{{option.first_name}} {{option.last_name}}&lt;/option&gt;
                 &lt;/select&gt;
              &lt;input type="submit" class="btn btn-primary btn-lg" value="Add Student" /&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>I have tried a select without a blank option but when I did this the model would not post on submit, so I added a default:</p>
  
  <pre><code>&lt;option value="" selected&gt;Default&lt;/option&gt;
  </code></pre>
  
  <p>but when I submit the form the select array (courselist) is spliced and a blank option is added as well as the the default above and the remaining courselist.</p>
  
  <p>Is there a way to just add the options from the courselist array (without the angular blank) and still be able to post it. </p>
  
  <p>I have tried to send a default - "sDefault" but for some reason this doesn't pass into the directive.</p>
  
  <p>Essentially I need to NOT have a default select, and be able to post to a form, simple you'd think?!
   ng-options are an issue because it is not a single item output i.e. {{first_name}} {{last_name}} and this again wouldn't post, anyway.</p>
  
  <p>Any help appreciated. </p>
  
  <p>Further info:</p>
  
  <p>Thanks to Timcodes below I have found the cause of the problem but still not a solution.
  <a href="http://plnkr.co/edit/7Hrv2E5DEgjn56wU0emO?p=preview" rel="nofollow">Example working without $http</a></p>
  
  <p>The above code I gave was to avoid lots of $http. But I have noticed that using the real version with api creates the blank select:</p>
  
  <pre><code>.controller("StudentController",function($scope,$http,$modal){
     $scope.studentlist = function() {
       $http.get('/api').
         success(function(data) {
            $scope.courselist = data;
          });
     };
     $scope.studentlist();
   });
  </code></pre>
  
  <p>$scope.courselist outputs
      [{"first_name":"Miguel","last_name":"Smith","id":10}] </p>
  
  <p>If I put this directly into the controller:</p>
  
  <pre><code>$scope.courselist=[{"first_name":"Miguel","last_name":"Smith","id":10}]
  </code></pre>
  
  <p>it works,as in the plunker example, but with the $http it creates a blank first select option.</p>
  
  <p>SOLUTION: I decided to preload the courselist from the backend into a javascript variable rather than api it. This way the list was defined before creating selectedItem. </p>
  
  <p>I'd be interested to hear angular solutions though.   </p>