javascript - AngularJS 1.4: How to create two-way binding using bindToController and controllerAs syntax -

okay, bugging me. have directive isolate scope, using controlleras syntax , bindtocontroller:

function exampledirectivefactory() {     var bindings = {         foo: '=',         bar: '@'     }      return {         bindtocontroller: true,         controller      : 'examplecontroller',         controlleras    : 'vm',         scope           : bindings,         template        : 'foo = {{ vm.foo }}<br />bar = {{ vm.bar }}'     }; } 

assuming usage this:

<example foo="foo" bar="bar"></example> 

...i expect value of vm.foo two-way bound value of foo attribute. instead, undefined.

the value of vm.bar equal attribute value bar of html element, expect.

when try change value of vm.bar using filter, no change persists.

when store filtered value of vm.bar new variable, vm.baz, works expected.

here fiddle

so question has 2 parts:

a) why value of vm.foo undefined when using '='?

b) why can't change value of vm.bar in scope of controller, if change not propagate html element attribute (which shouldn't, because i'm using '@')?

1.4 changed how bindtocontroller works. though appears angular's documentation still referring field true/false. can accept object scope attribute attributes indicate want bound , how bind it.

function exampledirectivefactory() {     var bindings = {         foo: '=',         bar: '@'     }      return {         bindtocontroller: bindings, //<-- things bound         controller      : 'examplecontroller',         controlleras    : 'vm',         scope           : {}, //<-- isolated scope         template        : 'foo = {{ vm.foo }}<br />bar = {{ vm.bar }}'     }; } 

in addition, in fiddle, foo undefined on parent scope, when binds, pull undefined directive's bound controller's scope.

further reading: 1 major thing new bindtocontroller syntax allows ability directive not isolated scope , still identify bind. can set scope true on directive have new child scope inherit it's ancestors.