Why is this AngualrJS data binding not working?

Question

How to create angularjs filter which outputs HTML has what looks like what I want, but my version isn't working yet. In my HTML I have:

    <ul>
        <li ng-repeat="book in books | filter:query">
            {{book.title}}
            <div ng-bind-html="book.snippet"></div>
        </li>
    </ul>

But it is displaying the book titles only, as if the <div ng-bind-html...> was not there. The controller has all desired data, starting with:

$scope.books = [
        {
        'image': '/images/the_best_of_jonathans_corner_full.jpg',
        'snippet': '<p>If you read just one book from this site, <em>The Best of Jonathan\'s Corner</em> is a head taller than the others. It contains   all of the best works of theology from Jonathan\'s Corner, and there\'s a lot to dig through&mdash;but only if you want. If not, feel free to enjoy and read  as little or as much as you like.</p><p>This book is the author\'s favorite title out of all the books sold from this site.</p>',
        'title': 'The Best of Jonathan\'s Corner',
        'url': '/redirect/the_best_of_jonathans_corner.html'
        }, 

The webpage looks something like:

CJS Hayward

Search books:

    The Best of Jonathan's Corner
    Doxology: The Anthology
    The Luddite's Guide to Technology 

Why is the book.title appearing but not the book.snippet? I have HTML in some of the snippets, and I would like them to render the snippet as HTML. (I can have an escaped version as {{book.snippet}}, but I'd like to know the right way to handle HTML (non-)escaping here.) All the snippets are meant to be written as strictly valid XHTML, with closing </p> tags etc.

The project is intended to be a playalong of the AngularJS phonecat tutorial.

--UPDATE--

Thank you, @ppa; I've edited the source file to include:

    <script src="/js/angular.min.js"></script>
    <script src="/js/angular-sanitize.js"></script>
    <script src="/js/controllers.js"></script>

The controllers.js now begins:

'use strict';

var authorApp = angular.module('authorApp', ['ngSanitize']);

And AngularJS is not repeating anything (and I don't see anything new in the console.logs):

CJS Hayward

Search books:

    {{book.title}}

What else should I be including? The app is presently at http://new.cjsh.name.

Answer 1

After taking a brief look at your code in the developer tools, I can see that you are using the angular-sanitize.js of Angular version 1.3(beta5). But your angular.js script is in version 1.2. I am guessing that the problem lies in this version mismatch. Please try to use the angular.js script from the same 1.3 version and see if this works. You can find it here.

Answer 2

In order for the ng-bind-html directive to work, the $sanitize service must be available. Did you include the ngSanitize module as well as the ng-sanitize.js script in your app?