How to make controller to work in a custom directive?
<p>i am working with angularjs.The problem is that i wrote a controller in directive after a compile function and the output through the compile function is shown as that in the pic. i.e "first in the compile". but the output from the controller is not showing and it's showing an error and the error is displayed in the image i have posted. please help me with this.
am sending the code </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module("myapp", []);
app.controller('ctrl', ['$scope', function ($scope) {
   
    $scope.emp = [{ name: "Day", age: "25", salary: "30000", place: "sydney", color: "#FF5733" },
        { name: "Dickinson", age: "34", salary: "6000", place: "disney", color: "#FAB304" },
        { name: "Domeyko", age: "27", salary: "9000", place: "newyork", color: "#0ED1B3" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#896BBB" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#387037" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#F3AE1B" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#FAB304" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#D10E7B" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#0EC8D1" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#FFC300  " },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#D10E5B" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#13D0E1" }];
}]);
app.directive('showDetails', function ($interpolate) {
    return {
        //templateUrl: 'showDetails.html'
        compile: function (tElement, tAttributes) {
            console.log(tAttributes.text + "-in compile");
        },
        controller: function ($scope, $element, $attri) {
            var v = $interpolate($attri.text)($scope);
            //console.log($attri.text + "-in controller");
            console.log(v + "-in controller");
        }
    }
     
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="../Scripts/angular.min.js"&gt;&lt;/script&gt;
    &lt;link href="../Content/bootstrap.css" rel="stylesheet" /&gt;
    &lt;script src="../Scripts/bootstrap.min.js"&gt;&lt;/script&gt;

    &lt;script src="../js/app.js"&gt;&lt;/script&gt;
    &lt;script src="../js/ChildCtrl.js"&gt;&lt;/script&gt;
    
    &lt;!--&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;--&gt;

   
&lt;/head&gt;

&lt;body style="background-image: url('../images/uRzTkNW.jpg');" ng-controller="ctrl"&gt;
   
    &lt;div ng-repeat="emps in emp" class="col-md-3"&gt;
        &lt;div show-details text="first"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>