Fetching api data in angular
<p>I am creating an application related to cricket match information in angular. Am getting problem in fetching api response. you can check api response <a href="http://cricapi.com/api/cricket" rel="nofollow noreferrer">here</a>.
Console is showing error, please check <a href="https://i.stack.imgur.com/puu3k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/puu3k.png" alt="here"></a></p>

<p>Here is my code:</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="container" ng-app="cricApp" ng-controller="cricCtrl"&gt;
&lt;div class="form-group"&gt;
&lt;h2&gt;Your result&lt;/h2&gt;
&lt;table class="table table-striped"&gt;
    &lt;thead&gt;
      &lt;tr&gt;&lt;th colspan="4"&gt;&lt;h4&gt;Cricket Match Info&lt;/h4&gt;&lt;/th&gt;&lt;/tr&gt;
      &lt;tr&gt;
      &lt;th&gt;Sno&lt;/th&gt;
      &lt;th&gt;unique_id&lt;/th&gt;
      &lt;th&gt;description&lt;/th&gt;
      &lt;th&gt;title&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="match in matchList | filter: nameFilter"&gt;
        &lt;td&gt;{{$index + 1}}&lt;/td&gt;
        &lt;td&gt;
          {{match.unique_id}}
        &lt;/td&gt;
         &lt;td&gt;{{match.description}}&lt;/td&gt;
        &lt;td&gt;{{match.title}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
angular.module('cricApp', []).
controller('cricCtrl', function($scope, $http) {
$scope.matchList = [];
    $http.get("http://cricapi.com/api/cricket").then(function (response) {
        console.log(response);
        $scope.matchList = response.data;
    });
}
);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>