Need Help With Angularjs

Hi everyone i'm working on a single web application and it seems like i'm having a problem with the routing system, i can do basic routing i mean when it's about including a text or a title but it doesn't work when i try to integrater my piece of code
This is the route code

  <script >[/B][/COLOR]
[B]
[COLOR=rgb(0, 0, 179)]        angular
  .module('app', [
    'ui.router'
  ])
  .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'home.html',
     
      })
      .state('about', {
        url: '/contact-us',
        templateUrl: 'contact-us.html',
       
      })
     
  }])
    </script>

Code (JavaScript):

And this is the code i try to integrate

  <section id="contact-info">

        <div class="center">               
            <h2> Contacte</h2>
           
        </div>
        <div class="gmap-area">
            <div class="container">
                <div class="row">

                    <div class="col-sm-5 ">
                        <div class="gmap">
                            <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13227.772784806783!2d-6.834219!3d34.019669!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x42cc43764dcf53d0!2sDyn+IT+Maroc!5e0!3m2!1sfr!2s!4v1466683771560"></iframe>
                        </div>
                    </div>

                    <div class="col-sm-7 map-content">
                        <ul class="row">
                            <li class="col-sm-6">
                                <address>
                                    <h5>company name</h5>
                                    <p>1, Rue gandi <br>
                                          </p>
                                   
                                </address>



                            <li class="col-sm-6">
                                <div class="col-sm-5 ">

                        <div class="gmap">

                            <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3325.411536812977!2d-7.641801284453289!3d33.54268235185662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda62d3c15890dc3%3A0x7fd591c903d578a8!2sTechnopark+Casablanca!5e0!3m2!1sfr!2s!4v1466685517306"></iframe>
                        </div>
                       
                    </div>
   
                               
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section> 

HTML:

the route code works if i try to insert <p></p> but when it comes to A block like the one above it doesn't work
THANKS IN ADVANCE FOR UR HELP GUYS