Untitled

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

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="myCtrl as vm">
    <button ng-click="vm.click()">Add panel</button>
    <my-test ng-repeat="panel in vm.panels" obj="panel"></my-test>
  </body>

</html>

angular.module("test", []);
angular.module("test").directive('myTest', function() {
  return {
    templateUrl: 'myTest.html',
    controller:function(){
      console.log(this.obj);
    },
    controllerAs:"ctrl",
    bindToController:true,
    scope:{
      obj:"="
    }
  };
}); 
angular.module("test").controller("myCtrl", function($http, $compile){
  var vm = this;
  vm.name = "Viktor";
  vm.country = "Sweden";
  vm.origin = "controller";
  vm.panels = [{
    name:"Viktor2",
    origin:"Controller array",
    country:"Sweden"
  }];
  vm.click = function(){
    $http.get("data"+Math.floor((Math.random() * 2) + 1)+".json").success(function(data){ 
      vm.panels.push({
        name:data.name,
        origin:data.origin,
        country:data.country
      })
    })
  }
})

<div class="panel panel-default">
  <div class="panel-heading">My name is: {{ctrl.obj.name}}</div>
  <div class="panel-body">
    <div>I live in : {{ctrl.obj.country}}</div>
  <div>Source origin : {{ctrl.obj.origin}}</div>
  </div>
</div>

{
  
  "name":"nils",
  "country":"denmark",
  "origin":"data1.json"
}

{
  "name":"clint",
  "country":"USA",
  "origin":"data2.json"
}

{
  
  "name":"Viktor",
  "country":"Sweden",
  "origin":"data0.json"
}