AngularJS & Jquery Datatables with $http

I currently am using angularJS with Jquery datatables however when I load the data back from my $http.get() request it goes into datatables but give No data avaliable. I believe this is due to datatables loading before I get the data back. Is there anyway to fix this? Here is a something similar to my code https://codepen.io/anon/pen/VrQzoP

HTML:

  <div class="container" ng-app="formvalid">
  <div class="panel" data-ng-controller="validationCtrl">
  <div class="panel-heading border">    
    <h2>Data table using jquery datatable in Angularjs
    </h2>
  </div>
  <div class="panel-body">
      <table class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Position</th>
        </tr>
      </thead>
        <tbody>
          <tr ng-repeat="n in Data">
            <td>{{n.base}}</td>
            <td>{{n.date}}</td>
            <td>{{n.rates}</td>
          </tr>
        </tbody>
    </table>
  </div>
</div>
</div>

CSS:

 table tr th{
  background:#337ab7;
  color:white;
  text-align:left;
  vertical-align:center;
}

JS:

//Angularjs and jquery.datatable with ui.bootstrap and ui.utils

var app=angular.module('formvalid', ['ui.bootstrap', 'ui.utils']);
app.controller('validationCtrl',function($scope, $http){
 $http.get("http://api.fixer.io/latest?base=USD").then(function(r){
   $scope.Data = r.data;
 });
});