Angular "=" scope does not work with camelCase

Question

I'm scope property of a directive It works fine when I use `show` as attr name. ```

``` app.js ``` angular.module('app',[]); angular.module('app') .controller('AppCtrl', function($scope){ $scope.fields = [1,2,3,4]; }); angular.module('app') .directive('fieldPill', function () { return { template: '

{{field}}:{{show}}--x

', restrict: 'E', scope:{ field: "=", "show": "=" } }; }); ``` (See this plunkr http://plnkr.co/edit/AcqmxeCerCOtGaw9dq9t?p=preview) But the directive doesn't load the boolean data at all when I use `x-show` as the attribute name. ```

``` app.js ``` angular.module('app',[]); angular.module('app') .controller('AppCtrl', function($scope){ $scope.fields = [1,2,3,4]; }); angular.module('app') .directive('fieldPill', function () { retur…

Accepted Answer

I think it is relating to the `x-` prefix. If you change it to anything like `mShow`, `m-show`, it will work.

From the HTML5 spec:

Attribute names beginning with the two characters "x-" are reserved for user agent use and are guaranteed to never be formally added to the HTML language. For flexibility, attributes names containing underscores (the U+005F LOW LINE character) are also reserved for experimental purposes and are guaranteed to never be formally added to the HTML language.

So avoid using `x-` for normal attribute name. :)

Angular "=" scope does not work with camelCase

Solution

Problem