var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $element, $compile) {
  var template = '<my-component></my-component>';
  
  var bindings = {
    myTitle: 'My Title'
  }
  var scope = angular.extend($scope.$new(true), {
    $ctrl: bindings
  });
  var newElement = $compile(template)(scope);
  $element.append(newElement);
  
});


app.component('myComponent', {
  bindings: {
    myTitle: '<'
  },
  template: `
    <div>
      <div>Doesn't work: {{ $ctrl.myTitle }}</div>
      <div>Works: {{ $parent.$ctrl.myTitle }}</div>
    </div>`
});
<!DOCTYPE html>
<html ng-app="Compl">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>
<body>
    <div>
        <input type=number ng-model="no1" placeholder="Enter the First Number" />
        <input type=number ng-model="no2" placeholder="Enter the First Number" />
        <no-sum></no-sum>
        <no-sub></no-sub>
    </div>
    <script>
        var app = angular.module("Compl", []);
        app.directive("noSum",function(){
            return{
                template : "Sum of Two Number {{(no1 + no2)}}" 
            };
        });
        app.directive("noSub",function(){
            return{
                template : "Sub of Two Number {{(no1 - no2)}}" 
            };
        });
    </script>
</body>
</html>
/* Put your css in here */