EDIT: a jsfiddle showing my code.
http://jsfiddle.net/julianeon/e57HW/4/
I'm trying to preserve line breaks in my JSON so they are displayed in the HTML. I'm also trying to filter the resulting array from the query to display only the first result. I don't know how to 'save' the filtered result and then display it as HTML so br tag shows properly.
<body ng-controller="TextPieces">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
<input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="tags">
<div ng-if=query.length != 0>
<h1>{{(lines|filter:query)[0].content}}</h1>
I tried
<p ng-bind-html-unsafe="(lines|filter:query)[0].content" />
but this didn't work.
Here is the controller JSON:
var snippet = angular.module('snippet', []);
snippet.controller('TextPieces', function ($scope) {
$scope.lines = [
{'title': 'Aesop',
'content': 'The earliest Greek sources <br />, including Aristotle, indicate that Aesop was born in Thrace at a site on the Black Sea coast. <br />The poet Callimachus called him Aesop of Sardis and the later writer Maximus of Tyre called him the sage of Lydia.'},
{'title': 'Bread and Circuses',
'content': 'This phrase originates... (etc.)