Service Data in Controller

by Rob Rothe

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="itemsApp" ng-controller="ItemsCtrl as ctrl">
  <div class="well well-sm">

    <form ng-submit="ctrl.addItem()">
      <input type="text" class="form-control" placeholder="Item Title" ng-model="ctrl.new_item.title">
    </form>

  </div>

  <ul>
    <li ng-repeat="item in ctrl.items">{{item.title}}</li>
  </ul>
</div>

JavaScript

angular
  .module('itemsApp', [])
  .service('ItemService', ItemService)
  .controller('ItemsCtrl', ItemsCtrl);

function ItemService() {
  var service = {
    items: [],
    addItem: addItem
  };

  return service;

  function addItem(new_item) {
    // run your http request and if the response is valid, push the new item to your service array
    service.items.push(new_item);
  }
}


function ItemsCtrl(ItemService) {
  var vm = this;

  vm.items = ItemService.items;
  vm.new_item = {};
  vm.addItem = addItem;

  function addItem() {
    ItemService.addItem(vm.new_item);
    vm.new_item = {};
  }
}