$http get to REST service not showing in component template

Question

Using the following code, i am able to do a http get from a json file, however when i try to run a http get against a REST service URL the angular webpage does not display the data on the form.

When i go to the browser developer tools i can see the response data, it does not display the results on the page. Any help is appreciated.

This is the controller i have -

angular.
  module('winecellarApp').
  component('wineCellar', {
    templateUrl: 'wine-cellar/wine-cellar.template.html',
    controller: ['$http',
      function WineCellarController($http) {
        var self = this;
        self.orderProp = 'age';  
       $http.get('http://localhost:8081/data').then(function(response)
       {
         self.phonsey = response.data;
         console.log(response.data);
       }).then(function(error){console.log(error);});
     }
   ]
});

---

UPDATE

Thanks George. This is the template i have, i modified the controller to use the catch block. The structure of the data is

json data:

{
    "age": 1, 
    "id": "motorola-xoom", 
    "imageUrl": "img/phones/motorola-xoom.0.jpg", 
    "name": "MOTOROLA XOOM\u2122", 
    "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
}, 

Template:

<div class = "container-fluid">
    <div class = "row">
        <div class = "col-md-2">
        <p>
            Search: <input ng-model= "$ctrl.query"/>
        </p>
        <p> {{$ctrl.query}} </p>
        <p>
            Sort by: 
            <select ng-model= "$ctrl.orderProp">
                <option value="name">Alphabetical</option>
                <option value="age">Newest</option>
                <option value="-age">Oldest</option>
            </select>
        </p>
        <p> {{$ctrl.orderProp}}</p>
        </div>
        <div class = "col-md-10">
            <ul class="phones">
              <li ng-repeat="phone in $ctrl.phonesy | filter:$ctrl.query | 
                   orderBy:$ctrl.orderProp">
                <p>{{phone.name}}</p>
              </li>
            </ul>
        </div>
   </div>
</div>

---

UPDATE

I removed the search and filter box. Still no data, i noticed that browser console shows the below message, but i see data in the network tab.

Object { data: null, status: -1, headers: headersGetter/<(), config: {…}, statusText: "" } wine-cellar.component.js:15:34 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8081/data. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I changed this to jsonp instead of http.get and i get the

Object { data: false, status: 404, headers: headersGetter/<(), config: {…}, statusText: "error" }