title: How to make a PUT request in AngularJS using Controller and Service?
body: <p>I have an AngularJS Web APP that interacts with a NodeJS API.
  I need to make some http request to the API (CRUD operations) with a task object.</p>
  
  <p>Right now i'm tryng to make a PUT request to a local Url:  </p>
  
  <pre><code>http://localhost:4000/tasks/:id/finish
  </code></pre>
  
  <p>I have a button in a view that triggers a function (in this case, <code>vm.finish</code>) on the controller, which makes a request to a Service (<code>TaskService.finish(id)</code>).</p>
  
  <h2>View</h2>
  
  <pre><code>    &lt;md-card ng-repeat="task in vm.unfinishedTasks"&gt;
          &lt;md-card-header ui-sref="main.edit({id: task.id})" class="md-title"&gt;
              {{ task.title }}
          &lt;/md-card-header&gt;
          &lt;md-card-title&gt;
              {{ task.description }}
          &lt;/md-card-title&gt;
          &lt;md-card-actions layout="row" layout-align="center"&gt;
              &lt;md-button ng-click="vm.delete(task.id)"&gt;&lt;md-icon&gt;close&lt;/md-icon&gt;&lt;/md-button&gt;
              &lt;md-button&gt;&lt;md-icon&gt;{{task.priorityClass}}&lt;/md-icon&gt;&lt;/md-button&gt;
              &lt;md-button ng-click="vm.finish(task.id)"&gt;&lt;md-icon&gt;done&lt;/md-icon&gt;&lt;/md-button&gt;
          &lt;/md-card-actions&gt;
      &lt;/md-card&gt;
  </code></pre>
  
  <h2>Controller</h2>
  
  <pre><code>function TasksListCtrl(TaskService, toastr, $http, $state, $promise) {
  
          var vm = this;
          ...
  
          vm.finish = function (id) {
                  console.log("Calling the service to finish the task...");
                  TaskService.finish(id)
                      .$promise.then(
                          function (response) {
                              toastr.success('Task finished.');
                              $state.reload();
                          },
                          function (err) {
                              toastr.error('There was a problem when trying to finish the task. Please refresh the page before trying again.')
                          }
                      )
          }
  </code></pre>
  
  <h2>Service</h2>
  
  <pre><code>function TaskService($resource) {
  
          //The API runs locally for now. 
          var apiUrl = 'http://localhost:4000/tasks';
          var resource = $resource(apiUrl);;
          return {
              unfinishedTasks: $resource(apiUrl, {}, {
                  query: {
                      method: 'GET',
                      params: {
                          finished: false
                      },
                      isArray: true
                  }
              }),
              finishedTasks: $resource(apiUrl, {}, {
                  query: {
                      method: 'GET',
                      params: {
                          finished: true
                      },
                      isArray: true
                  }
              }),
              save: function (taskDto) {
                  return resource.save(taskDto);
              },
              finish: function (id) {
                  console.log('Finishing the task...')
                  return $resource(apiUrl + '/:id/finish', {
                      id: '@id'
                  }, {
                      'finish': {
                          method: 'PUT',
                          params: {
                              id: "@id"
                          }
                      }
                  });
              },
              delete: function (id) {
                  return particularResource.delete();
              }
          }
  </code></pre>
  
  <p>The <code>console.log</code> messages are shown as expected, but the PUT request is not being made at all. In this case, how do I code the PUT request properly? and what is right way to call the function of the Service?</p>
  
  <p>Here's the <strong>console error</strong> when i try to call the finish function from the service:</p>
  
  <pre><code>Calling the service to finish the task...
  Finishing the task...
  angular.js:14525 TypeError: Cannot read property 'then' of undefined
      at TasksListCtrl.vm.finish (TasksListCtrl.js:42)
      at fn (eval at compile (angular.js:15358), &lt;anonymous&gt;:4:274)
      at callback (angular.js:26994)
      at Scope.$eval (angular.js:18161)
      at Scope.$apply (angular.js:18261)
      at HTMLButtonElement.&lt;anonymous&gt; (angular.js:26999)
      at defaultHandlerWrapper (angular.js:3734)
      at HTMLButtonElement.eventHandler (angular.js:3722)
  </code></pre>