title: Passing date from ngModel to stored procedure in WebAPI and SQL Server
body: <p>I have created a stored procedure to get corresponding results from sql server db which contains only the chosen date from the datepicker directive in my Angular App. I don't know how to access from WebAPI to the stored procedure in my SQL Server DB. In the following code I show you my approach:</p>
  
  <blockquote>
    <p>Created stored Procedure in SQL Server:</p>
  </blockquote>
  
  <pre><code>USE [SAMPLE_DB]
  GO
  SET ANSI_NULLS ON
  GO
  SET QUOTED_IDENTIFIER ON
  GO
  
  CREATE PROCEDURE getDatum
      @Dt datetime
  AS
  BEGIN
      SET NOCOUNT ON;
  
      SELECT b.Id, b.Datum, b.num_aucts
      FROM dbo.Beispiels AS b
      WHERE b.Datum = @Dt
  END
  GO
  </code></pre>
  
  <blockquote>
    <p>Ctrl in Angular:</p>
  </blockquote>
  
  <pre><code>//Resource from WebAPI
  var Resource = $resource(baseUrl + '/api/beispiels/:Id', {
      Id: '@Id'
  }, {});
  
  $scope.list = Resource.query();
  
  //definitions of Datepicker (UIbootstrap)
  $scope.open = function ($event) {
     $event.preventDefault();
     $event.stopPropagation();
  
     $scope.opened = true;
  };
  
  $scope.dateOptions = {
     formatYear: 'yy',
     startingDay: 1
  };
  </code></pre>
  
  <blockquote>
    <p>View in my Angular App:</p>
  </blockquote>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;p class="input-group"&gt;
              &lt;input type="text" 
                     class="form-control" 
                     datepicker-popup 
                     ng-model="dt" 
                     is-open="opened" 
                     min-date="" 
                     max-date="" 
                     datepicker-options="dateOptions"
                     ng-required="true" 
                     close-text="Close" 
                     /&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default" ng-click="open($event)"&gt;
                     &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/span&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;table class="table table-bordered"&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Datum&lt;/th&gt;
              &lt;th&gt;Num Aucts&lt;/th&gt;
              &lt;tr ng-repeat="liste in list"&gt;
                  &lt;td&gt;{{ liste.Id }}&lt;/td&gt;
                  &lt;td&gt;{{ liste.Datum }}&lt;/td&gt;
                  &lt;td&gt;{{ liste.num_aucts }}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>WebAPI Controller:</p>
  </blockquote>
  
  <pre><code>...
  public class BeispielsController : ApiController
  {
     private EasContext db = new EasContext();
  
     // GET: api/Beispiels
     [HttpGet]
     public IQueryable&lt;Beispiel&gt; GetBeispiels()
     {
        return db.Beispiels.AsQueryable();
     }
  ...
  }
  </code></pre>
  
  <blockquote>
    <p>Db Context:</p>
  </blockquote>
  
  <pre><code>public partial class EasContext : DbContext
  {
      public EasContext()
        : base("name=EasContext")
      {
      }
  
      protected override void OnModelCreating(DbModelBuilder modelBuilder)
      {
         throw new UnintentionalCodeFirstException();
      }
  
      public virtual ObjectResult&lt;getDatum&gt; getDatum(Nullable&lt;System.DateTime&gt; dt)
       {
           var dtParameter = dt.HasValue ?
           new ObjectParameter("Dt", dt) :
           new ObjectParameter("Dt", typeof(System.DateTime));
  
           return ((IObjectContextAdapter)this).ObjectContext.ExecuteFunction&lt;getDatum&gt;("getDatum", dtParameter);
       }
  ...
  </code></pre>
  
  <p>I want to synchronize the ngModel value <code>dt</code> with the value from the stored procedure <code>@Dt</code>, that means, when the user click on the datepicker and chooses a date. the date will displayed in the ngModel input field and then it should be insert to the stored procedure and returns the result only for example all data which date have "2013/01/03" or something else.</p>