title: Consuming REST Web Api service from angularjs
body: <p>Ça va?</p>
  
  <p>I'm developing a program that should be able to recover data from an MVC .net server and visualize it in an angularjs front-end. Unfortunately isn't working. Here's the code:</p>
  
  <p>MVC controller:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Net;
  using System.Net.Http;
  using System.Web.Http;
  using Newtonsoft.Json;
  using MvcPrueba.Models;
  using System.Diagnostics;
  using System.Web.Mvc;
  
  namespace MvcPrueba.Controllers
  {
  public class ValuesController : ApiController
  {
      #region camposPrivados
      private static Logica l;
      #endregion
      #region metodosREST
      // GET api/values
  
      public IEnumerable&lt;TablaEntrada&gt; Get()
      {
          Debug.WriteLine("Llamada GetAll");
          return l.getTEList();
          //return new string[] { "value1", "value2" };
      }
      /*public JsonResult Get()
      {
          return l.getTEList();
      }*/
  
      // GET api/values/5
      public string Get(int id)
      {
          return l.getSingleTE(id);
          //return "value";
      }
  
      // POST api/values
      public void Post([FromBody]string value)
      {
          l.addNewTE(value);
      }
  
      // PUT api/values/5
      public void Put(int id, [FromBody]string value)
      {
          l.modifyExistingTE(id, value);
      }
  
      // DELETE api/values/5
      public void Delete(int id)
      {
          l.deleteExistingTE(id);
      }
      #endregion
      #region metodosInicio
      public static void App_Start()
      {
          l = Logica.fillListaTE();
      }
      #endregion
  }
  }
  </code></pre>
  
  <p>And, angularjs Factory:</p>
  
  <pre><code>(function () {
  
  var ETFactory =   function ($http, $window) {
      var TEs = [];
  
      var factory  =   {};
      factory.bidaliGetAllRequest = function () {
          $http.get('http://localhost:50059/api/values').
              success(function (response) {
                  TEs = response;
                  $window.alert("Http request OK, values:"+"\n"+TEs[0].descripcion+"\n"+TEs[1].descripcion+"\n"+TEs[2].descripcion);
              }).error(function () {
                  $window.alert("error");
          });
      }
      factory.getTEs =   function () {
            /*$http.get('http://localhost:50059/api/values').
              success(function (response) {
                  TEs = response;
                  $window.alert("OK.\n"+movimientos[0].descripcion);
                  return TEs;
              });*/
          return http.get('http://localhost:50059/api/values');
      }
      factory.anadirNuevo = function (nuevo) {
  
      }
      /*
      factory.cambiarvalor =   function ()  {
        if (a.valor == "a")
        {
          b.visible = false;
          c.enabled = "checked";
          movimientos[4].dominio =   ["opcion1","opcion2","opcion3","opcion4","opcion5"];
        }
        else
        {
          b.visible = true;
          c.enabled = "";
          movimientos[4].dominio =   ["opcion1","opcion2"];
        }
  
      };*/
      return factory;
  }
  
  controlCajaApp.factory('ETFactory', ETFactory);
  }());
  </code></pre>
  
  <p>I know the http request gets to the back-end, I've made some tries. The thing is that in the front-end doesn't change anything. Any ideas?</p>
  
  <p>Edit:</p>
  
  <p>A couple of screenshots of developer tools network tab and console:</p>
  
  <p><a href="http://i.stack.imgur.com/W815y.jpg" rel="nofollow">http://i.stack.imgur.com/W815y.jpg</a>
  <a href="http://i.stack.imgur.com/usZ0f.jpg" rel="nofollow">http://i.stack.imgur.com/usZ0f.jpg</a></p>
  
  <p>Edit2:</p>
  
  <p>This is the controller, which calls to the factory:</p>
  
  <pre><code>(function () {
  var ControlETCtrl = function (ETFactory, $scope, $http, $window) {
      var scope = this;
  
      scope.titulo = "Mi tabla de entradas";
  
      scope.movimientos = ETFactory.getTEs();
      //scope.movimientos = [];
  
      scope.funciones = {};
      scope.cargarDatos = function () {
          /*ETFactory.bidaliGetAllRequest();*/
          $http.get('http://localhost:50059/api/values').
              success(function (response) {
                  this.movimientos = response;
                  $window.alert("OK.\n"+movimientos[0].descripcion);
              });
      }
      function cargar (){
          $http.get('http://localhost:50059/api/values').
              success(function (response) {
                  this.movimientos = response;
                  $window.alert("OK.\n"+movimientos[0].descripcion);
              });
      };
      scope.funciones.cambiarvalor = function () {
          ETFactory.cambiarvalor();
      }
      scope.funciones.guardarMovimiento = function () {
      /*
          var auxCopyMov = angular.copy(scope.nuevoMovimiento);
          auxCopyMov.tipo = scope.funciones.tipo(auxCopyMov);
          ETFactory.postMovimiento(auxCopyMov);
          scope.movimientos = ETFactory.getMovimientos();
          scope.total = ETFactory.getTotal();
          scope.nuevoMovimiento.importe = 0;
          */
      }
  }
  controlCajaApp.controller('ControlETCtrl', ['ETFactory', ControlETCtrl]);
  }());
  </code></pre>
  
  <p>And finally the html view, where a i use the variable movimientos from controller in the ng-repeat:</p>
  
  <pre><code>&lt;section name="ET" class="row-fluid"&gt;
      &lt;form class="form-horizontal text-left"&gt;
          &lt;fieldset&gt;
              &lt;div id="legend"&gt;
                  &lt;legend class=""&gt;{{controlET.titulo}}&lt;/legend&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div&gt;
                  &lt;div class="control-group" ng-repeat="valor in controlET.movimientos"     ng-show="valor.visible"&gt;
                      &lt;label class="control-label"&gt;{{valor.descripcion}}&lt;/label&gt;
                      &lt;input ng-show="valor.tipo_visualizacion == 2" ng-disabled="valor.enabled" type="text" class="input" ng-model="valor.valor" ng-change="controlET.funciones.cambiarvalor()"&gt;&lt;/input&gt;
                      &lt;select ng-show="valor.tipo_visualizacion == 1" ng-disabled="valor.enabled" name="v" ng-model="valor.valor" ng-options="v for v in valor.dominio"&gt;&lt;/select&gt;
                      &lt;!--            
                      &lt;input type="checkbox" ng-show="valor.tipo_visualizacion == 3"              ng-disabled="valor.enabled" type="text" class="input" ng-model="valor.valor" ng-change="controlET.funciones.cambiarvalor()"&gt; 
                      --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/section&gt;
  </code></pre>