Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Seth Warner
Seth Warner
1,878 Points

Angular: For some reason my expressions don't seem to be passing the data, they just show the expressions, any ideas?


angular.module("mainModule", [




angular.module('Mastered', [])
.controller('MasteredController', function ($scope, masteredService) {
    $scope.mastered = masteredService.mastered;


angular.module('HoningNow', [])
.controller('HoningNowController', function ($scope, honingService) {
    $scope.honingNow = honingService.honingNow;


angular.module('IntendingTo', [])
.controller('IntendingToController', function ($scope, intendingService) {
    $scope.intendingTo = intendingService;



.service('masteredService', function () { //The service is where ajax requests can be made.
this.mastered = [

            { "name" : "Html5" },  //In theory and in the form of a Json file, this would be the
            { "name" : "CSS3" },   //response from the backend, in this example it is just an "Mock".
            { "name" : "Javascript" },
            { "name" : "Ajax" },
            { "name" : "Jquery" },
            { "name" : "Angular" },
            { "name" : "Git" },
            { "name" : "Git-Flow" },
            { "name" : "Github" },
            { "name" : "PhP" },
            { "name" : "MySQL" },
            { "name" : "Terminal" },
            { "name" : "Sketch" }



.service('honingService' function () {
this.honingNow = [

          { "name" : "Yeoman" },
          { "name" : "Sass" },
          { "name" : "D3" },
          { "name" : "Browserfiy" },
          { "name" : "Protractor" },




.service('intendingService', function () {
this.intendingTo = [
            "name" : "Laravel",
            "name" : "Forge",
            "name" : "Envoyer",
            "name" : "Kendo UI",





<!DOCTYPE html>
                            <!--To the viewer of my Portfolio, I have included notes explaining my comprehension of
                             the pages through out this project to demonstrate to you my grasp on the programming. -->

<html lang="en" data-ng-app="mainModule"> <!-- Set up your main ng-app directive -->

                <!-- Make sure to add ".." not "portfolio/View" for the file path -->   <!-- CSS Plugin  -->
        <link rel="stylesheet" href="../Styling/styling.css" type="text/css" />           <!-- CSS Project -->
        <link rel="stylesheet" href="../Styling/navBar.css" type="text/css" />          

        <meta charset="UTF-8">
        <title> <h2>Welcome to my Portfolio!</h2> </title>

        <ul id="navBar">
          <li><a href="#home"> Mastered </a></li>
          <li><a href="#contactMe"> Honing Now </a></li>
          <li><a href="#myBackground"> Intending To </a></li>
          <li><a href="#superPowers"> Contact Me </a></li>



        <div ui-view></div> <!-- This is where your views are injected, in your app. -->

        <div data-ng-controller="MasteredController">

                    <li data-ng-repeat="skills in mastered"> {{skills.name}} </li>


        <div data-ng-controller="HoningNowController">

                    <li data-ng-repeat="hone in honingNow"> {{hone.name}} </li>


        <div data-ng-controller="IntendingToController">

                    <li data-ng-repeat="intend in intendingTo"> {{intend.name}} </li>


       <div data-ng-controller="ContactMeController">

                <!-- Set up form on this page.-->



        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>                                                         <!-- Jquery CDN -->
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
                                                                                                                               <!-- Jquery Plugin -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>           <!-- UI-router CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>                           <!-- Angular CDN -->
        <script type="text/javascript" src="../Interactivity/app.js"></script>                                                 <!-- Angular: App.js -->
        <script type="text/javascript" src="../Interactivity/controllers.js"></script>                                         <!-- Angular: Controllers.js -->
        <script type="text/javascript" src="../Interactivity/services.js"></script>                                            <!-- Angular: Services.js -->
        <script type="text/javascript" src="../Interactivity/config.js"></script>                                    
                                                                                                                               <!-- Angular: directives.js -->
                                                                                                                               <!-- Angular add on's such as material, route, resource, etc -->
                                                                                                                               <!-- Javascript Project -->


3 Answers

Conor Sinclair
Conor Sinclair
3,372 Points

My AngularJS is a bit rusty, so I'm not sure if this is entirely accurate, but you seem to missing an ng-app directive (unless it's automatically defined in Workspaces). Add it to HTML or body element and try again?

Seth Warner
Seth Warner
1,878 Points

Conor Sinclair Hey Conor, it's there, when I copied and pasted my code into the treehouse question section, it hides the DOCTYPE html
html lang="en" data-ng-app="mainModule"

For some reason, still can't figure this thing out

Sean T. Unwin
Sean T. Unwin
28,690 Points

I edited your op to format the code highlighting to their respective languages.

ProTip: after the 3 ticks, with no space in between, type the language you want the code to be highlighted in. You can also specify a file name immediately after the 3 tics, and if the file type is recognized by the highlighting system then the code will be highlighted accordingly.

       [...code here...]
       [...code here...]