angularjs - Angular TypeError: name.replace is not a function for ng-style -

i'm new angular , keep getting following error in console typeerror: name.replace not function. i'm not sure what's causing it, seems caused ng-style statement , maybe camelcase?

the part don't understand why ng-style="isfrontview() || !matches && {'display': 'none'}" throws error, ng-style="!isfrontview() || !matches && {'display': 'none'}" doesn't throw error.

in attempt remedy situation tried removing camelcase function name , went lowercase. attempted use !!isfrontview(), neither seemed remove error message.

do know cause of error message , potential fix?

html template:

<div class="system-view">     <div class="controller-container fill" id="systemview1" ng-style="isfrontview() || !matches && {'display': 'none'}">         <canvas id="canvaslayer-shell" data-layername="front" width="617" height="427"></canvas>         <i ng-if="!matches" class="fa fa-repeat toggle-view" ng-click="changeview()" ng-touch="changeview()"></i>     </div>     <div class="controller-container fill" id="systemview2" ng-style="!isfrontview() || !matches && {'display': 'none'}">         <canvas id="canvaslayer-shell" data-layername="back" width="617" height="427"></canvas>         <i ng-if="!matches" class="fa fa-undo toggle-view" ng-click="changeview()" ng-touch="changeview()"></i>     </div> </div> 

backend code:

$scope.frontview = true; $scope.matches = true;  $scope.isfrontview = function() {    return $scope.frontview; };  $scope.changeview = function() {     $scope.frontview = !$scope.frontview; }; 

p.s. console error still functions normally.

your potential issue due incorrect usage of ng-style. ng-style sets watcher on expression , sets element's style of jquery/jqlite element.css. , inside element.css css attribute (name) converted standard camel casing (which uses regex string replace). in specific case expression evaluated boolean (true) instead of object (ng-style each property) , boolean not have replace property (which available on string object) , hence fails. can test converting expression evaluate string using string concatenation.

i.e ng-style="'' + (isfrontview() || !matches && {'display': 'none'})"

looking @ expression need hide , show element, make use of ng-show/ng-hide directives achieve that.