Incorrect ng-class output Jasmine Test Angular

http://stackoverflow.com/questions/25978964/incorrect-ng-class-output-jasmine-test-angular

by Jakub Strojewski

HTML

<script src="https://code.angularjs.org/1.2.24/angular.js"></script>
<article ng-controller="Ctrl">
        <h2>directive</h2>
        <input type="checkbox" ng-model="asset.selected" />
<pre>
selectedItems.length: {{ selectedItems.length }}
asset.selected: {{ asset.selected }}
    
selectedItems.length > 1 && asset.selected === true:
    {{ selectedItems.length > 1 && asset.selected === true }}
    
(selectedItems.length > 1 && asset.selected === true) ? 'class1' : 'class2':
    {{ (selectedItems.length > 1 && asset.selected === true) ? 'class1' : 'class2' }}
</pre>

<article my-directive ng-class="(selectedItems.length > 1 && asset.selected === true) ? 'class1' : 'class2'">asdf</article>


</article>

CSS

pre {
    background-color: #eee;
    border: 1px solid #aaa;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
}

.class1 {
    color: red;
}

.class2 {
    color: green;
}

JavaScript

(function (app) {
    'use strict';
    
    app.controller('Ctrl', function ($scope, $compile, $element) {
        $scope.asset = {
            selected: true
        };
        
        $scope.selectedItems = [{}, {}, {}];
        
        $element.append(
            $compile(
                '<article my-directive ' +
                'ng-class="(selectedItems.length > 1 && asset.selected === true) ? \'class1\' : \'class2\'">' +
                'asdf</article>'
            )($scope)
        );
        
        console.log($element.html());
        console.log($compile($element.html())($scope));
    });
    
}(angular.module('app', [])));



function logIt(msg){var log=window.document.createElement('li');log.innerText=msg;window.document.querySelector('.logs ol').appendChild(log)}