Could not get this to work


#1

I have already seen other discussion, but the code does nothing on my page.

Here is the codes

index.html














<div class="main" ng-controller="MainController">
  <div class="container">
    <div class="content">
     <program-listing  listing="program"></program-listing>
  </div>
</div>
    </div>
<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <h3>Bolt</h3>
        <ul>
          <li>Careers</li>
          <li>Terms</li>
          <li>Help</li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>More Bolt</h3>
        <ul>
          <li>Gift Cards</li>
          <li>Trailers</li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>News</h3>
        <ul>
          <li>Blog</li>
          <li>Twitter</li>
          <li>YouTube</li>
          <li>Google+</li>
          <li>Facebook</li>
        </ul>
      </div>
    </div>
  </div>



<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>

  <!-- Directives -->
  <script src="js/directives/programListing.js"></script>


programListing.html

	<div class="col-md-3" class="series_img" ng-src="{{ listing.series_img }}">
    </div>

        <div class="col-md-6">
          <h1 class="series">{{ listing.series }}</h1>
          <h2 class="episode"> {{ listing.episode }}</h2>
          <p class="description"> {{  listing.description  }}</p>
        </div>

        <div class="col-md-3">
          <ul class="list-group">
            <li class="list-group-item"><span>Date: {{ listing.datetime | date:'mediumDate'}}</span>  </li>
            <li class="list-group-item"><span>On air:{{ listing.datetime | date:'fullDate' }} </span>  </li>
            <li class="list-group-item"><span>Time:{{ listing.datetime | date:'shortTime' }}</span>  </li>
            <li class="list-group-item"><span>Season:{{ listing.season }}</span>  </li>
            <li class="list-group-item"><span>Genre:{{ listing.genre }}</span>  </li>
          </ul>
        </div>

      </div>

programListing.js

app.directive('programListing', function(){
return{
restrict: 'E',
scope: {
listing: "="
},
templateUrl: 'js/directives/programListing.html'
};
});

Any ideas?


#2

Hi xupim,
Could you give a brief description of the problem you're having, and also include data from MainController.js.

Try modifying your datetime filters like below and see if it helps.

<div class="col-md-3">
          <ul class="list-group">
            <li class="list-group-item"><span>Date:</span> {{listing.datetime|date}} </li>
            <li class="list-group-item"><span>On air:</span> {{listing.datetime|date:'EEEE'}} </li>
            <li class="list-group-item"><span>Time:</span>  {{listing.datetime|date:'h:mm a'}} </li>
            <li class="list-group-item"><span>Season:</span> {{listing.season}} </li>
            <li class="list-group-item"><span>Genre:</span> {{listing.genre}} </li>
          </ul>
        </div>