how to use angular expression value as an attribute for html element

// Code goes here

var app = angular.module('main-module', ['ui.bootstrap']);

app.directive('parentDirective', function($uibModal, $compile) {
    return {
      restrict: 'E',
      template: "<h2>I am Parent</h2><button ng-click='click()'>Click Me</button>",
      scope: {
        child:'@'
      },
      link: function($scope, elem, attrs) {
        console.log('?',$scope.child, $scope);

        var template = "<div><h3>This is modal</h3>" 
              + "Ideally you should see the child directive below"
              + "<hr />"
              + "<div "+ $scope.child + "></div></div>"; 

        $scope.click = function() {
          $uibModal.open({
            template: template,
            scope: $scope,
            size: 'lg',
          });
        }
      }
    };
  })
  .directive('childDirective', function() {
    return {
      restrict: 'A',
      template: "<div><h4>I am Child</h4><a ng-click='click()'>Click Me!!</a></div>",
      replace: true,
      scope: {},
      link: function($scope, elem, attrs) {
        $scope.click = function() {
          alert("I am in child scope");
        }
      }
    };
  }).directive('anotherChildDirective', function() {
    return {
      restrict: 'A',
      template: "<div><h4>I am another Child</h4><a ng-click='click()'>Click Me!!</a></div>",
      replace: true,
      scope: {},
      link: function($scope, elem, attrs) {
        $scope.click = function() {
          alert("I am in child scope");
        }
      }
    };
  });;