title: Simple MVC4 Razor Table UI Filtering using Angularjs
body: <p>I have a simpe MVC 4 application. this is my first ever ASP.NET MVC project and I completed the View-Controller-Model binding and getting  the results in he table format. Now my challenge is to filter the data using AngularJS. I googled a lot. All the examples I have seen so far are either advanced or hardcoded values in the app.js controller. Can someone please guide me how to implement the simple filtering using AngularJs. What do I need do achieve the same.</p>
  
  <p>Below is my View (Index.html)</p>
  
  <pre><code>    @model IEnumerable&lt;ProjectForm.Models.CreateProjectModel&gt;
      @{
      ViewBag.Title = "Browse Tasks";
      }
      @using System.Web.Optimization
  
      &lt;h2&gt;All Task List&lt;/h2&gt;
     &lt;table class="table table-striped table-condensed table-hover table-bordered table-nonfluid"&gt;
      &lt;tr&gt;
           &lt;th&gt;
               @Html.DisplayNameFor(model =&gt; model.task_id)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.task_desc)
          &lt;/th&gt;
           &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.task_type)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Priority)
          &lt;/th&gt;
           &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Task_status)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Requester)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.RequestDate)
          &lt;/th&gt;
  
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.busowner)
          &lt;/th&gt;
            &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.devowner)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.StartDate)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.est_effort)
          &lt;/th&gt;
           &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Complete_date)
          &lt;/th&gt;
  
           &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.act_effort)
          &lt;/th&gt;
  
      &lt;/tr&gt;
  
       @foreach (var item in Model) {
      &lt;tr&gt;
  
            &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.task_id)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.task_desc)
          &lt;/td&gt;
                  &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.task_type)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Priority)
          &lt;/td&gt;
           &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Task_status)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Requester)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.RequestDate)
          &lt;/td&gt;
  
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.busowner)
          &lt;/td&gt;
              &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.devowner)
          &lt;/td&gt;
  
            &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.StartDate)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.est_effort)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Complete_date)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.act_effort)
          &lt;/td&gt;
  
  
      &lt;/tr&gt;
  
  
  }
  
  &lt;/table&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>I also found a most closest solution in Stack Overflow, but it is not complete. 
  <a href="https://stackoverflow.com/questions/23662914/sorting-mvc-razor-ui-table-using-angularjs/29734626#29734626">Sorting MVC razor UI table using Angularjs</a></p>