AngularJS values not visible in directive and template- html -

i have following directive in html:

<as-excel-download institutionid="vm.reportinstitution.id"></as-excel-download> 

the directive looks this:

(function() { 'use strict';  angular     .module('aposoft.common')     .directive('asexceldownload', asexceldownload);  function asexceldownload() {     var directive = {         restrict: 'e',         scope: {                             institutionid: '='         },         templateurl: 'app/common/exceldownload/asexceldownload.html'     };     return directive;      //////////// } })(); 

and directive template looks this:

<a href="/api/schedulerecordexcel/monthreport/{{institutionid}}">   <img src="./excel.png" alt="icon" /> </a> 

and don't know why {{institutionid}} emty in directive template html. if change institutionid vm in every of above files (which scope in controller) , access institution id on vm in directive template html works fine. know doing wrong here?

i think using wrong name attribute, part:

<as-excel-download institutionid="vm.reportinstitution.id"></as-excel-download> 

should this:

<as-excel-download institution-id="vm.reportinstitution.id"></as-excel-download>