why $scope variable inside directive is not getting updated?

Question

I have made a directive for highmaps using angular, map is getting rendered. I need to pass the final configured object back to controller. Hence i am assigning like this in directive,

  $timeout(function() {
      scope.mapconfigured = mapConfig;
   });

Initially i defined the controller like this,

app.controller('mainCtrl', function($scope, DB) {
    $scope.mydata = DB.getStatesData();
    $scope.mapconfigured = {};
}

But the mapconfigured variable is not getting updated inside the directive and also the controller is not printing what i exactly needed.

I am also initially assigning the mapconfigured variable to the directive

  <my-map mapconfigured="mapconfigured" mydata="mydata" header="'Highmap Demo'"></my-map>

what is the issue here? Here is the APPLICATION

EXPECTED OUTPUT:

I need to assign the mapConfig object to mapconfigured variable of scope inside my controller.

Answer 1

That because you used mapconfigured in scope directive, and in the link directive you tried to define mapConfigured with data.

Replace with this code:

  $timeout(function() {
      scope.mapconfigured = mapConfig;
  });

Answer 2

As Ivan mentioned in comments it was a typo , scope variable i declared in the controller as 'mapconfigured' but in directive i assigned to 'mapConfigured', changing like this worked

<my-map mapconfigured="mapconfigured" mydata="mydata" header="'Highmap Demo'"></my-map>

$timeout(function() {
   scope.mapconfigured = mapConfig;
  });