I recently asked a question where I was advised to start using **AngularJS** to dynamically create a table. Unfortunately, I have no knowledge of **AngularJS** (or coding at all), and was following a tutorial which led to deprecated code. Essentially, from what I can gather, the success and error method used in `$http` should be replaced with a `.then()` method. As my code currently stands, all I am being returned is: `{{ cribs | json }}`.

**My html code:**

```
<html>
<head>
    <meta charset="utf-8">
    <title>ng-cribs Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>    
  <body ng-app="ngCribs" ng-controller="cribsController">
      <h1>Testing</h1>
      </br>
      <div class="well" ng-repeat="crib in cribs">
          <h3> {{ crib.name }} </h3>
          <p><strong>Contact Number: </strong>{{ crib.contactNumber }}</p>
          <p><strong>Email Address: </strong>{{ crib.email }}</p>
          <p><strong>Pass Number: </strong>{{ crib.passNumber }}</p>
      </div>
      <pre>{{ cribs | json }}</pre>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
  <script src="app.js"></script>
  <script src="scripts/cribsController.js"></script>
  <script src="scripts/cribsFactory.js"></script>    
</html>

```

My js code (in the same directory):

```
angular.module('ngCribs', ['ui.bootstrap']);

```

My AngularJS factory code (in a "scripts" subfolder):

```
angular
    .module('ngCribs')
    .factory('cribsFactory', function($http) {
        function getCribs() {
            return $http.get('data/data.json');
        }

        return {
            getCribs: getCribs
        }
    });

```

My AngularJS controller code (also in the "scripts" directory):

```
angular
    .module('ngCribs')
    .controller('cribsController', function($scope, cribsFactory){
        $scope.cribs;

        cribsFactory.getCribs().success(function(data) {
            $scope.cribs = data;
        }).error(function(error) {
            console.log(error);
        });

        // $scope.hello = 'Hello wo!';
    });

```

And my JSON file (in a separate directory called "data"):

```
[
    {
      "name": "Joel Doe",
      "dob": "17-03-1994",
      "houseNumber": "31",
      "postcode": "LS4 2RS",
      "contactNumber": "07941405771",
      "email": "joeldoe@outlook.com",
      "passNumber": "01",
    },
    {
      "name": "Harry Doe",
      "dob": "21-04-1992",
      "houseNumber": "43",
      "postcode": "LS2 1DH",
      "contactNumber": "0797651387",
      "email": "harrydoe@outlook.com",
      "passNumber": "02",
    },
    {
      "name": "Jane Doe",
      "dob": "19-12-1993",
      "houseNumber": "65",
      "postcode": "LS1 6EK",
      "contactNumber": "07979804398",
      "email": "janedoe@outlook.com",
      "passNumber": "03",
    },
]

```

I have also included a link to my code: <http://codepen.io/anon/pen/yVyXzp>