AngularJS - Scope value not accessible in the directive Scope

Question

FIDDLE

I have created a directive :-

return {
        restrict: \'EAC\',
        scope: {
            statesActive: \'=\'
        },            
                 


        

Answer 1

You have mistakes in $scope.states. It must be an object, not a string.

Following code works

JS

angular.module('myApp', []);
angular.module('myApp').directive('gtMap', 
    function() {
      return {
          restrict: 'EAC',
          scope: {
              statesActive: '='
          },            
          link: function (scope, element, attrs) {
              var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(scope.statesActive);
          }
       }
    }
  );

angular.module('myApp').controller('MyCtrl', 
    function($scope) {
        // If states is a string got from database, use angular.fromJson(json) to parse. 
        // $scope.states = angular.fromJson(response); 
        $scope.states = {states:[{ 'state' : 'CA', 'color' : '#61c419'}]};

    });

HTML

Check out this jsfiddle http://jsfiddle.net/fizerkhan/69Pq9/1/