ng-show / ng-hide stop working if placed inside a file included with ng-include

I observed that when I include a template with the ng-include directive, ng-show and ng-hide don't seem to work.

Note: Tested in angularjs 1.0.4 and 1.0.5

This Works

template.html

<table ng-init="changeable = null">
  <tr ng-repeat="(key, item) in items" ng-click="changeable = key">
    <td>
      <span ng-show="changeable != key">{{item.name}}</span>
      <input ng-hide="changeable != key" ng-model="item.name">
    </td>
    <td>
      <button ng-click="changeable = null">OK</button>
    </td>
  </tr>
</table>

This does not work

template.html

<div ng-include src="'/changeable_table.html'"></div>

changeable_table.html

<table ng-init="changeable = null">
  <tr ng-repeat="(key, item) in items" ng-click="changeable = key">
    <td>
      <span ng-show="changeable != key">{{item.name}}</span>
      <input ng-hide="changeable != key" ng-model="item.name">
    </td>
    <td>
      <button ng-click="changeable = null">OK</button>
    </td>
  </tr>
</table>

Update

after a while github@pkozlowski-opensource give me a link to the wiki that explains really good why is necesary this namespace, it's The Nuances of Scope Prototypal Inheritance

You have 2 problems there:

  1. Don't forget that ng-repeat creates a new scope for each entry and the way you're doing it, the changeable property will not be shared among all those scopes. Define your model correctly (example):

    <table ng-init="model = {}; model.changeable = null">

    And change all references to changeable to model.changeable.

  2. The ng-click on the tr will override the ng-click on the button (when you click the button you also click on the tr). Move the tr ng-click to the span:

    <span ng-show="model.changeable != key" ng-click="model.changeable = key">{{item.name}}</span>

plunker: http://plnkr.co/edit/TTAUsPhqSq2rkF47EtNL?p=preview