AngularJS - Directive two way binding not working with ISOLATED Scope

Question

I am building a demo weather app, by using controller/provider & 2 directives,( with isolated scope, one directive for rendering week worth forecast & another directive to display clicked weekday forecast on top of the page).

On click on one of the week days I am trying to show clicked weekday on top of the screen. This works fine if I remove Isolated scope in directives however it does not work with isolated scope in place.

Can anyone please suggest what I am missing here?

Link: A directive with Isolated Scope: http://plnkr.co/edit/L9AcMv?p=preview ( this does not work? What Am I missing here?)

Code for your reference:

    app.directive('myWeather', function() {
      return {
        restrict: 'EA',
        transclude: 'true',
//If I comment below scope then it works fine though it does not if I am using isolated scope
        scope: {
          place: '=' //Two-way data binding
        },
        templateUrl: 'my-weather.html'
      };
    });

    app.directive('selectedWeather', function() {
      return {
        restrict: 'EA',
        transclude: 'true',
//If I comment below scope then it works fine though it does not if I am using isolated scope
        scope: {
          place: '=' //Two-way data binding
        },
        templateUrl: 'selected-weather.html'
      };
    });

Many Thanks,

Solution

When you use isolated scope, the setSelectedItem method of controller scope are invisible.

Solution:

Add a setSelectedItem to the directive isoalted scope. + Add a two way data binding to forecast too.

Working at: http://plnkr.co/edit/e5ApIg?p=preview

The changes made are:

app.directive('myWeather', function() {
  return {
    restrict: 'EA',
    transclude: 'true',
    //If I comment below scope then it works fine though it does not if I am using isolated scope
    scope: {
      place: '=', //Two-way data binding
      /// here added a two way data binding to forecast too
      forecast: '='
    },
    templateUrl: 'my-weather.html',
    /// here added setSelectedItem to isolated scope.
    link: function (scope,e,a) {
      scope.setSelectedItem = function(forecast) {
          scope.forecast = forecast;
      }
    }
  };
});

And on index.html

<div my-weather place="place" forecast="forecast"></div>

Comments

[miensol]

Please explain why the authors solution didn't work, providing a solution is good but won't help him if he gets in trouble again for the same reason...

[Maverick09]

How can I achieve same results using "&" instead of using "=" For example : scope: { place: '=', forecast: '&' },

[rnrneverdies]

"&" mean expression. Read this onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope