While presenting a separate div based on a condition inside ng-repeat, I encountered an error message that reads "Syntax Error: Token '<' not a primary expression at column 32 of the expression [widget.Type == 'Bar'>". How can this issue be resolved?
Here is the relevant code snippet:
HTML:
<div id="main" class="drop-container" ng-click="addEvent($event)" droppable>
<div ng-controller="CustomWidgetCtrl" style="margin: 20px; top: 50px; left: 80px; height: 300px; width: 500px;" ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" data-identifier="{{widget.id}}">
<div class="box">
<div class="box-header">
<h3>{{ widget.name }}</h3>
<div class="box-header-btns pull-right">
<a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div ng-if="widget.Type == 'Bar'>
<body ng-controller="MainCtrl">
<div data-ac-chart="'Bar'" data-ac-data="data" data-ac-config="config" class="chart"></div>
</body>
</div>
</div>
</div>
</div>