<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container well" ng-controller="MainController as app">
    <div class="user pull-left" ng-repeat="user in app.users track by user.id">
      <pre>{{ user | json }}</pre>
      <div ng-if="user.show.title">
        title: {{user.title}}
      </div>
      <div ng-if="user.show.age">
        Age: {{user.age}}
      </div>
    </div>

    <button ng-click="app.onSubmit(app.users)">Submit Data</button>

  </div>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
  </script>
  <script src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
  <script src="app.js"></script>
</body>

</html>
(function(ng) {
  "use strict";
  var MainController = function MainCtrlF($scope, $http) {
    var
      app, getRequestDefinitionObject, postUsers, handleResponse, handleError,
      transformResponse, transformRequest, appendTransform;
    app = this;
    app.users = [];
    handleError = function handleErrorF(response) {
      console.log(response);
    };
    handleResponse = function handleResponseF(response) {
      app.users = response.data;
      console.log("response app.users", app.users);
    };
    // this function is from the docs: https://docs.angularjs.org/api/ng/service/$http#overriding-the-default-transformations-per-request
    appendTransform = function appendTransformF(defaults, transform) {
      defaults = angular.isArray(defaults) ? defaults : [defaults];
      return defaults.concat(transform);
    };

    /*
      EXAMPLE OF TRANSFORMING RESPONSE FROM GET REQUEST 
    */
    transformResponse = function transformResponseF(data) {
      var users, newUser, setVisibility, transformObj;
      users = [];
      transformObj = function transformObj(user) {
        console.log("user original", user);
        newUser = ng.copy(user);
        newUser.show = {};
        newUser.show.title = true;
        newUser.show.age = (user.name === "Yahya");
        newUser.title = user.name; 
        delete newUser.name;
        console.log("user after", newUser);
        users.push(newUser);
      }; 

      ng.forEach(data, transformObj);
      return users;
    };
    getRequestDefinitionObject = {
      method: "GET",
      url: "users.json",
      transformResponse: appendTransform($http.defaults.transformResponse, transformResponse)
    };
    $http(getRequestDefinitionObject).then(handleResponse, handleError);

    /*
      EXAMPLE OF TRANSFORMING REQUEST TO POST REQUEST
    */
    transformRequest = function transformRequestF(data) {
      var users, newUser, transformObj;
      users = [];
      if(typeof data === "string") {
    //if data is string convert to JS array
      data = JSON.parse(data);
      }
      
      transformObj = function transformObj(user) {
        console.log("user post original", user); 
        newUser = ng.copy(user); 
        console.log("newUser", typeof newUser);
        delete newUser.show;
        newUser.name = newUser.title;
        delete newUser.title;

        console.log("user post after transform", newUser);
        users.push(newUser);
      };

      ng.forEach(data, transformObj);
      
      users = JSON.stringify(users);
      
      return users; 
    };

 
    postUsers = function postUsersF(users) {

      var postRequestDefinitionObject = { 
        method: "POST", 
        url: "/fake-endpoint-to-post-data-to", 
        data: users,
        headers: {
          'Content-Type': 'application/json'
        },
        //To add a transformer to the default list, say ahead of the JSON deserializer
        transformRequest: appendTransform($http.defaults.transformRequest, transformRequest)
      };

      $http(postRequestDefinitionObject).then(handlePostResponse, handlePostError);

      var handlePostResponse = function handlePostResponseF(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
        console.log(data);
      }

      var handlePostError = function handlePostErrorF(data, status, headers, config) {
        $scope.status = status + ' ' + headers;
      }

    }

    app.onSubmit = function(users) {
      console.log("Submit clicked");
      console.log("users", users);

      postUsers(users);

    };
  };
  ng.module("app", []).controller("MainController", MainController);
}(angular));
.user {
  margin: 0 5px;
  padding: 10px;
  background-color: gray;
}
.user:first-of-type {
  margin-left: 0;
  margin-right: 5px;
}
.user:last-of-type {
  margin-right: 0;
  margin-left: 5px;
}

AngularJS testing $http transform response function
[
  {"id": 1, "name": "Alice",      "age": 26},
  {"id": 2, "name": "Laurie",    "age": 30},
  {"id": 3, "name": "Dustin",    "age": 29},
  {"id": 4, "name": "AJ", "age": 35}
]