Доступ к значению атрибута внутри шаблона в Angularjs

Есть несколько проблем (указанных ниже), а также несколько советов по использованию Angular.

Вот рабочая скрипка

1. Angular чувствителен к регистру и "специфичен" в именах атрибутов. Если вы хотите, чтобы ваш атрибут был myInfoв вашей директиве, то в разметке вам нужно установить его как my-info. Angular автоматически адаптирует имя из my-infoразметки в myInfoдирективу.
2. Ваша разметка (где вы пытаетесь вывести имя) ссылается myInfo, однако ваше объявление области назначает это переменной области info. Чтобы вывести имя, вам нужно изменить его на {{info.firstname}}.

Ниже приведен код исправления с комментариями:

<div ng-app="testApp" >
  <!-- Issue #2: If you want camel-case "myInfo", angular expects the attribute to be "my-info". -->
  <test-component   
  my-info="{firstname: 'green',lastname: 'Woods'}"/>
</div>  

И директива:

var module = angular.module('testApp', [])
    .directive('testComponent', function () {
    return {
        restrict: 'E',
        // Issue #1: The template referenced 'myInfo', but your scope was assigning that to 'info'.
        template: '<div>This will not run fine..! </div>'+
        '<div> This first name is: {{info.firstname}} </div>',
        scope: {
           /* Hints: 
                = is two way-binding "deep" watch.  
                =* is "shallow" watch, and on this simple object, that is all you need.  
                @ is text-binding (for reference)
           */
           info: '=*myInfo',
        },
        controller: function($scope) {
        },
        link: function (scope, element, attrs) {
        }
    };
});

Наконец - обычно (по моему опыту) вы не устанавливаете значение атрибута непосредственно в разметке, а скорее ссылаетесь на $scopeпеременную из своего контроллера и назначаете значение в своем контроллере.