Isolate and shared scope same time in directive AngularJS

Question

New to Angular so not sure if I ask my question the right way.

So I have form.

<form ng-controller="myController" action="" method="get">
    <div myDirective> 
       <input ng-model="question.sex" value="male" type="radio">
       <input ng-model="question.sex" value="female" type="radio">
       <button ng-click="log(LogThisQuestionAnsware())"></button>
    </div>
    <div myDirective> 
       <input ng-model="question.agree" value="no" type="radio">
       <input ng-model="question.agree" value="yes" type="radio">\
       <button ng-click="log(LogThisQuestionAnsware())"></button>
    </div>
</form>

So my goal is to log current "question" answer. on button click.

How can I access local question in myDirective separate from my second directive and have in controller scope too.

--[ Edit: ]--

Ok this is pretty much my scenario. http://jsfiddle.net/y5esnm09/5 Each button have to log its own directive value not both radio values if they are selected.

Answer 1

If I correctly understood your question, you want both directive instances to bind to the same question object, but have their scopes separate from eachother:

Set up a two way data binding between your directive and your controller, e.g.:

<div my-directive question="question">
 <!-- the rest -->

angular.module('your.module').directive('myDirective', function() {
   return {
      scope: question: '=',
       //other props
   }

This will ensure that both directives bind to the same question object but have their own separate scopes.

An alternative would be to set the scope property to true, that way they will both create a child scope of your controller.

EDIT: Fiddle demonstrating two way binding:

http://jsfiddle.net/L0eqf4qe/

PS: I converted myDirective to my-directive, angular will translate the snake-case to camelCase for you.