Deferred Test & Promise using $q in AngularJS.

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

function f1() {
  var def1 = $q
  $http.get('items_part_1.json')
    .then(function() {
        def1.resolve("def1 başarılı");
      },
      function() {
        def1.resolve("def1 başarısız");
      });
  return def1.promise();
}

function f2(_f2Param) {
  var def2 = $q
  $http.get('items_part_2.json')
    .then(function() {
        def2.resolve("def2 başarılı");
      }
      ,function() {
        def2.resolve("def2 başarısız");
      });
  return def2.promise();
}

app.controller('MainCtrl', function($scope, $q, $http) {
  console.log("Q:");
  //console.log(Q); 
  f1()
    .then(function(_f1Param) {
        console.log("f1() başarılı");
        f2(_f1Param)
          .then(function(_f1Param) {
            console.log("f2() başarılı");
          }, 
          function() {
            console.log("f2() başarısız");
          });
      }
      ,function() {
        console.log("f1() başarısız");
      });
/*
  return;
  var defer1 = $q.defer(),
    defer2 = $q.defer();
  defer1 = $http.get('items_part_11.json');

  defer1
    .then(function(res) {
        console.log("then 1");
        //return defer2;
        defer2 = $http.get('items_part_2.json');
      },
      function(err) {
        console.log("then 1 hata");
        console.log(err);
        defer2.reject(); // then 2 hata -> then 3
      });

  defer2.promise()
    .then(function(res) {
        console.log("then 2");
        console.log(res);
      },
      function(err) {
        console.log("then 2 hata");
        console.log(err);
      })
    .then(function(res) {
        console.log("then 3");
        console.log(res);
      },
      function(err) {
        console.log("then 3 hata");
        console.log(err);
      });
*/
});

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <!--script src="https://rawgithub.com/kriskowal/q/master/q.min.js"></script-->
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <h3>Get Items</h3>
    <pre>{{items | json}}</pre>
    
    <h3>Get Nested Data</h3>
    <pre>{{nestedItems | json}}</pre>
    
    <h3>Get Nested (Better)</h3>
    <pre>{{betterNested | json}}</pre>
  </body>

</html>

/* Put your css in here */

[
  {
    "id" : 1,
    "name": "Foo" 
  },
  { 
    "id": 2, 
    "name": "Bar" 
  }
]

[
  {
    "id" : 3,
    "name": "Test" 
  },
  { 
    "id": 4, 
    "name": "Monkey" 
  }
]

[
  { 
    "id" : 1,
    "name" : "Steve",
    "childIds": [
      100,
      103
    ]
  },
  {
    "id": 2,
    "name": "Loretta",
    "childIds": [
      101,
      102
    ]
  }
]

[
  {
    "id": 100,
    "name": "Sydney"
  },
  {
    "id": 101,
    "name": "June"
  },
  {
    "id": 102,
    "name": "Jim Bob"
  },
  {
    "id": 103,
    "name": "Mary Ellen"
  }
]