Q:

Custom directive does not appear in the page

I have the following html page
<input type="text" value="Doe">
<h3>Search Result</h3>
<div class="list-group">
    <search-result></search-result>
    <search-result></search-result>
</div>

and here is my angular directive
    var app=angular.module('App',['ngRoute']);
    app.config(function($routeProvider){
        $routeProvider
        .when('/',{
            templateUrl:'pages/main.html',
            controller:'mainController'
        })

    })

myApp.directive("searchResult", function() {
   return {

       template: '<a href="#" class="list-group-item"><h4 class="list-group-item-heading">Doe, John</h4><p class="list-group-item-text">555 Main St., New York, NY 11111</p></a>'
   }
});

The problem is, when I load the page the custom directive does not appear in my page. There is no error in console.I checked the inspect -> Element in the browser. It has the <search-result></search-result> but it seems that, it is ignored.
How can i fix it?

A:

Instead of this
myApp.directive("searchResult", function()

it should be
app.directive("searchResult", function() 

