Angular: Empty Fiddle

http://angularjs.org/

by bosch

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">Users List:
    <button ng-click="getDataFromService()">1. Get the Users</button>
    <ul>
        <li ng-repeat="user in users">{{user.name}}</li>
    </ul>
    <input type="text" ng-model="newUser.name" placeholder="New user name"></input>
    <input type="text" ng-model="newUser.email" placeholder="email goes here"></input>
    <button ng-click="addUserWithService()">Add a new User</button>
</div>

JavaScript

var myApp = angular.module('myApp', []);

//this is your controller:
myApp.controller('MyCtrl', function ($scope, UserService) {
    $scope.newUser = {};//this is the new user object. You can initialise it however you want
    $scope.newUser.name = ""; //initialize the data for the new user
    $scope.newUser.email = "";
    
    //this is how you bind the list to the data in the service:
    $scope.users = UserService.usersList;

    //ask the service to grab the data from the server. This is bound to the first button in the page
    $scope.getDataFromService = function () {
        UserService.getUsers(); //after this gets called, the data will be shown in the page automatically
    }

    //ask the service to add a new user with the API (called from the second button):
    $scope.addUserWithService = function () {
        //note that you can process the promise right here (because of the return $http in the service)
        UserService.addUser($scope.newUser)
            .success(function(data){
                //here you can process the data or format it or do whatever you want with it
                console.log("Controller: the user has been added");
            })
            .error(function(data){
                //something went wrong
                console.log("Controller: the user has been added");
            });        
        
    }
    
});

//the Service goes here:
myApp.factory('UserService', function ($http) {
    var UserService = {};

    UserService.usersList = []; //this is the array of users that we use in the controller (and in the page)
    //whatever resides in this array will be shown on the page (because the controller is bound to it)

    
    //get the users from the API
    UserService.getUsers = function () {
        $http.get("http://fiddle.jshell.net") //your API url goes here
            .success(function(dataFromServer){
                //actually, here you should update the usersList from the server like this:
              ...