Input radio ng-model not updated after all

Question

I try to solve a puzzle why an ng-model of input[radio] controls is not set as I expect. When a page is loaded all radios are initiated correctly. Clicking on different controls changes the radioVal variable - its value is rendered in the page. The problem is that it looks like it takes place only in a DOM. When I debug the code the `$scope.radioVal` is always the same ... The isolated scope of `modalDialog` does not contain the `radioVal` property. In which scope the radio `ng-model` is created ? Is it a different instance of it? The working code can be found here on jsfiddle. My html code is: ```

Click me

Accepted Answer

ALWAYS put a dot in `ng-model`

You are currently trying to pass a primitive to a nested scope which will break 2 way binding. If you pass an object however it will maintain reference to the original object

Simply changing :

```
$scope.radioVal = "nothing changes me";
```

To:

```
 $scope.myModel={radioVal : "nothing changes me"};
```

And using the dot in `ng-model`

```
<input  ng-model="myModel.radioVal">
```

changes the inheritance and therefore the binding.

DEMO

Input radio ng-model not updated after all

Solution

Problem