diff --git a/examples/img/gb.gif b/examples/img/gb.gif
new file mode 100644
index 0000000..3c6bce1
Binary files /dev/null and b/examples/img/gb.gif differ
diff --git a/examples/img/ru.gif b/examples/img/ru.gif
new file mode 100644
index 0000000..b525c46
Binary files /dev/null and b/examples/img/ru.gif differ
diff --git a/examples/img/us.gif b/examples/img/us.gif
new file mode 100644
index 0000000..8f198f7
Binary files /dev/null and b/examples/img/us.gif differ
diff --git a/examples/no-line-breaks.html b/examples/no-line-breaks.html
new file mode 100644
index 0000000..6dce902
--- /dev/null
+++ b/examples/no-line-breaks.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html ng-app="simple">
+  <head>
+    <title>Simple</title>
+    <!-- we need jquery for e2e testing -->
+    <script src="https://rawgithub.com/components/jquery/2.0.2/jquery.js"></script>
+    <script src="https://rawgithub.com/johannestroeger/bower-angular-unstable/1.1.5/angular.js"></script>
+    <script src="https://rawgithub.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
+    <script>
+angular.module('simple', ['contenteditable'])
+.controller('Ctrl', function($scope) {
+//  $scope.model2 = 'hello'
+  $scope.model = "Initial stuff <b>with bold</b> <em>and italic</em> yay"
+  window.scope = $scope
+})
+.controller('Ctrl2', function($scope) {})
+
+angular.bootstrap(document, ['simple'])
+    </script>
+  </head>
+  <body>
+    <div ng-controller="Ctrl">
+      <label>Contenteditable (View):</label>
+      <span id="input" contenteditable="true" ng-model="model" no-line-breaks="true" style="display:block">
+        something
+      </span>
+      <hr>
+      <div>
+        <label>Model:</label>
+        <pre id="output" onclick="console.log('clicked the output')">{{ model }}</pre>
+      </div>
+     </div>
+  </body>
+</html>
diff --git a/examples/select-non-editable.html b/examples/select-non-editable.html
new file mode 100644
index 0000000..952e83b
--- /dev/null
+++ b/examples/select-non-editable.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html ng-app="simple">
+  <head>
+    <title>Simple</title>
+    <!-- we need jquery for e2e testing -->
+    <script src="https://rawgithub.com/components/jquery/2.0.2/jquery.js"></script>
+    <script src="https://rawgithub.com/johannestroeger/bower-angular-unstable/1.1.5/angular.js"></script>
+    <script src="https://rawgithub.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
+    <script>
+angular.module('simple', ['contenteditable'])
+.controller('Ctrl', function($scope) {
+//  $scope.model2 = 'hello'
+  $scope.model = "Initial stuff <b>with bold</b> <em>and italic</em> and <span contenteditable='false'>non-editable</span> stuff"
+})
+.controller('Ctrl2', function($scope) {})
+
+angular.bootstrap(document, ['simple'])
+    </script>
+  </head>
+  <body>
+    <div ng-controller="Ctrl">
+      <label>Contenteditable (View):</label>
+      <div id="input" contenteditable="true" ng-model="model" strip-br="true" select-non-editable="true">
+        something
+      </div>
+      <hr>
+      <div>
+        <label>Model:</label>
+        <pre id="output" onclick="console.log('clicked the output')">{{ model }}</pre>
+      </div>
+     </div>
+  </body>
+</html>
diff --git a/examples/simple.html b/examples/simple.html
new file mode 100644
index 0000000..0c46776
--- /dev/null
+++ b/examples/simple.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html ng-app="simple">
+  <head>
+    <title>Simple</title>
+    <!-- we need jquery for e2e testing -->
+    <script src="https://rawgithub.com/components/jquery/2.0.2/jquery.js"></script>
+    <script src="https://rawgithub.com/johannestroeger/bower-angular-unstable/1.1.5/angular.js"></script>
+    <script src="https://rawgithub.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
+    <script>
+angular.module('simple', ['contenteditable'])
+  .controller('Ctrl', function($scope) {
+    $scope.model = "Initial stuff <b>with bold</b> <em>and italic</em> yay"
+  })
+angular.bootstrap(document, ['simple'])
+    </script>
+  </head>
+  <body>
+    <div ng-controller="Ctrl">
+      <label>Contenteditable (View):</label>
+      <div id="input" contenteditable ng-model="model">
+      </div>
+      <hr>
+      <div>
+        <label>Model:</label>
+        <pre id="output" onclick="console.log('clicked the output')">{{ model }}</pre>
+      </div>
+      <hr>
+      <div contenteditable>Edit me - I don't affect anything</div>
+      <hr>
+      <div id="i1" contenteditable="true" ng-model="model"></div>
+      <hr>
+      <div id="i2" contenteditable="TRUE" ng-model="model"></div>
+      <hr>
+      <div id="i3" contenteditable="tRuE" ng-model="model"></div>
+      <hr>
+      <div id="i4" contenteditable="tRUe" ng-model="model"></div>
+      <hr>
+      <div id="i5" contenteditable="f" ng-model="model"></div>
+    </div>
+  </body>
+</html>
diff --git a/examples/states.json b/examples/states.json
new file mode 100644
index 0000000..3bab414
--- /dev/null
+++ b/examples/states.json
@@ -0,0 +1,3 @@
+[ "Russia <img src=\"img/ru.gif\">"
+, "United States of America <img src=\"img/us.gif\">"
+, "United Kingdom <img src=\"img/gb.gif\">"]
diff --git a/examples/strip-br.html b/examples/strip-br.html
new file mode 100644
index 0000000..d8ace70
--- /dev/null
+++ b/examples/strip-br.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html ng-app="simple">
+  <head>
+    <title>Simple</title>
+    <!-- we need jquery for e2e testing -->
+    <script src="https://rawgithub.com/components/jquery/2.0.2/jquery.js"></script>
+    <script src="https://rawgithub.com/johannestroeger/bower-angular-unstable/1.1.5/angular.js"></script>
+    <script src="https://rawgithub.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
+    <script>
+angular.module('simple', ['contenteditable'])
+.controller('Ctrl', function($scope) {
+//  $scope.model2 = 'hello'
+  $scope.model = "Initial stuff <b>with bold</b> <em>and italic</em> yay"
+})
+.controller('Ctrl2', function($scope) {})
+
+angular.bootstrap(document, ['simple'])
+    </script>
+  </head>
+  <body>
+    <div ng-controller="Ctrl">
+      <label>Contenteditable (View):</label>
+      <div id="input" contenteditable="true" ng-model="model" strip-br="true">
+        something
+      </div>
+      <hr>
+      <div>
+        <label>Model:</label>
+        <pre id="output" onclick="console.log('clicked the output')">{{ model }}</pre>
+      </div>
+     </div>
+  </body>
+</html>
diff --git a/examples/typeahead1.html b/examples/typeahead1.html
new file mode 100644
index 0000000..ca7b89e
--- /dev/null
+++ b/examples/typeahead1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="typeahead1">
+  <head>
+    <meta charset="utf-8">
+    <link href="https://rawgithub.com/jozefizso/bower-bootstrap-css/2.3.2/css/bootstrap.css" rel="stylesheet">
+    <script src="https://rawgithub.com/components/jquery/2.0.2/jquery.js"></script>
+    <script src="https://rawgithub.com/johannestroeger/bower-angular-unstable/1.1.5/angular.js"></script>
+    <script src="https://rawgithub.com/angular-ui/bootstrap-bower/0.4.0/ui-bootstrap.js"></script>
+    <script src="https://rawgithub.com/angular-ui/bootstrap-bower/0.4.0/ui-bootstrap-tpls.js"></script>
+    <script src="https://rawgithub.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
+    <script>
+angular.module('typeahead1', ['ui.bootstrap', 'contenteditable'])
+.controller('Typeahead1Ctrl', function ($scope) {
+  $scope.selected = undefined
+  $scope.states = ['<b>sweet home</b> Alabama', '<i>cold</i> Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
+})
+    </script>
+  </head>
+  <body>
+    <div class='container-fluid' ng-controller="Typeahead1Ctrl">
+      <pre>Model: {{selected| json}}</pre>
+      <div ng-model="selected" typeahead="state for state in states | filter:$viewValue" contenteditable>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/typeahead2.html b/examples/typeahead2.html
new file mode 100644
index 0000000..baf90ab
--- /dev/null
+++ b/examples/typeahead2.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="typeahead2">
+  <head>
+    <meta charset="utf-8">
+    <link href="https://rawgithub.com/jozefizso/bower-bootstrap-css/2.3.2/css/bootstrap.css" rel="stylesheet">
+    <script src="https://rawgithub.com/components/jquery/2.0.2/jquery.js"></script>
+    <script src="https://rawgithub.com/johannestroeger/bower-angular-unstable/1.1.5/angular.js"></script>
+    <script src="https://rawgithub.com/angular-ui/bootstrap-bower/0.4.0/ui-bootstrap.js"></script>
+    <script src="https://rawgithub.com/angular-ui/bootstrap-bower/0.4.0/ui-bootstrap-tpls.js"></script>
+    <script src="https://rawgithub.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
+    <script>
+angular.module('typeahead2', ['ui.bootstrap', 'contenteditable'])
+.controller('Typeahead2Ctrl', function ($scope) {
+  $scope.selected = undefined
+  $scope.states =
+  [ 'Russia <img src="img/ru.gif">'
+  , 'USA <img src="img/us.gif">'
+  , 'UK <img src="img/gb.gif">'
+  ]
+})
+.filter('ignoreImg', function(){
+  var escapeRegexp = function(str) {
+    return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1")
+  }
+  var noImg = function (str) {
+    return str.replace(/<img[^>]*>/g, '')
+  }
+  return function(items, query) {
+    var ret = []
+    items.forEach(function(item){
+      if (noImg(item).match(new RegExp(escapeRegexp(noImg(query)), 'gi')))
+        ret.push(item)
+    })
+    return ret
+  }
+})
+// override typeahead's Highlight filter - don't highlight anything
+.filter('typeaheadHighlight', function() {
+  return function(matchItem, query){return matchItem}
+})
+</script>
+  </head>
+  <body>
+    <div class='container-fluid' ng-controller="Typeahead2Ctrl">
+      <pre>Model: {{ selected | json }}</pre>
+      <div ng-model="selected" typeahead="state for state in states | ignoreImg:$viewValue" contenteditable>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/typeahead3.html b/examples/typeahead3.html
new file mode 100644
index 0000000..4b2a32f
--- /dev/null
+++ b/examples/typeahead3.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="typeahead3">
+  <head>
+    <meta charset="utf-8">
+    <link href="https://rawgithub.com/jozefizso/bower-bootstrap-css/2.3.2/css/bootstrap.css" rel="stylesheet">
+    <script src="https://rawgithub.com/components/jquery/2.0.2/jquery.js"></script>
+    <script src="https://rawgithub.com/johannestroeger/bower-angular-unstable/1.1.5/angular.js"></script>
+    <script src="https://rawgithub.com/angular-ui/bootstrap-bower/0.4.0/ui-bootstrap.js"></script>
+    <script src="https://rawgithub.com/angular-ui/bootstrap-bower/0.4.0/ui-bootstrap-tpls.js"></script>
+    <script src="https://rawgithub.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
+    <script>
+angular.module('typeahead3', ['ui.bootstrap', 'contenteditable'])
+.controller('Typeahead3Ctrl', function($scope, $http, limitToFilter, ignoreImgFilter) {
+  $scope.selected = ""
+  $scope.states = function(query){
+    return $http.get("states.json").then(function(response){
+      console.log("response", response)
+      return limitToFilter(ignoreImgFilter(response.data, query), 2)
+    })
+  }
+})
+.filter('ignoreImg', function(){
+  var escapeRegexp = function(str) {
+    return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1")
+  }
+  var noImg = function (str) {
+    return str.replace(/<img[^>]*>/g, '')
+  }
+  return function(items, query) {
+    var ret = []
+    items.forEach(function(item){
+      if (noImg(item).match(new RegExp(escapeRegexp(noImg(query)), 'gi')))
+        ret.push(item)
+    })
+    return ret
+  }
+})
+// override typeahead's Highlight filter - don't highlight anything
+.filter('typeaheadHighlight', function() {
+  return function(matchItem, query){return matchItem}
+})
+    </script>
+  </head>
+  <body>
+    <div class='container-fluid' ng-controller="Typeahead3Ctrl">
+      <pre>Model: {{ selected | json }}</pre>
+      <div ng-model="selected" typeahead="state for state in states($viewValue)" contenteditable="true" style="width:400px; height: 20px;"></div>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
index 888e8dd..7ecbc00 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,16 @@
     <title>angular-contenteditable</title>
   </head>
   <body>
-    <h1>angular-contenteditable</h1>
+    <h1>angular contenteditable</h1>
+    <h2>examples<h2>
+    <ul>
+      <li><a href='examples/no-line-breaks.html'>no-line-breaks.html</a></li>
+      <li><a href='examples/select-non-editable.html'>select-non-editable.html</a></li>
+      <li><a href='examples/simple.html'>simple.html</a></li>
+      <li><a href='examples/strip-br.html'>strip-br.html</a></li>
+      <li><a href='examples/typeahead1.html'>typeahead1.html</a></li>
+      <li><a href='examples/typeahead2.html'>typeahead2.html</a></li>
+      <li><a href='examples/typeahead3.html'>typeahead3.html</a></li>
+    </ul>
   </body>
 </html>
