Using `bindToController` & `controllerAs` Together In The Same Angular 1.4+ Directive

When I looked for articles about how to use bindToController in directives, I saw a lot of code samples that look like:

What Doesn’t Work?

With that, I should be able to use the directive in the following way:
(not using a directive template here, maybe that’s what others tested!)

And that should display success, right? It doesn`t!

Things I tried:

  • Defining the controller separately via angular.controller(...), vs making it a function in the directive definition object (DDO) as above

  • In the scope, changing the property name to be different from the directive name.

What Works? The solution

Simply, swap the values of bindToController and scope!

Like this:

I already read that in Angular 1.4 you can use the bindToController property similar to how you use the scope property, meaning you use it to define what properties are created in the new scope.

I still thought I need scope: {} though to make that new scope magic work. But it turned out that this was actually ruining it. All I needed was to set it to true to have a separate scope.

Complete Sample

I have kept it stupid simple so that the main point is not lost.

See the Pen bindToController Sample by Meligy, Mohamed (@Meligy) on CodePen.

Here’s what AngularJS Team Recommended Developers Do In AngularU Keynote

From watching the AngularU conference keynote and Q & A session, I noted some of their hints and answers into a list of recommendations

  • Use the latest stable 1.x version of Angular, at the moment 1.4
    No surprise, ha?!

  • Use the latest stable TypeScript.

    • Use the official Angular type definition file when using TypeScript.
    • Note that TypeScript 1.5 beta mainly gives you decorators/annotations, which are only relevant for Angular 2 anyway.
    • Alternatively, at least move to ES6, using Babel or Traceur
      • Both babel and tracer support annotations.
  • SystemJS seems like package manager of attention today, as it allows you to load libraries regardless of where they are packaged
    Obviously they are also checking all popular packaging options.

  • Follow John Papa’s Angular styledguide.
    That was a BIG endorsement IMHO, coming from the official team, even that it was kind-of in passing.

  • Use ui-router until the new Angular router (I think now Component Router) is ready.
    This was a very subtle recommendation, probably just due to the new router not being ready, and lack of other equivalent options.
    At least they said they looked at it for the new router, which wasn’t the case when I checked in March!

Disclaimer: The list is my personal interpretation – You can watch the full video and judge the correctness / accuracy.

AngularU, NPM 3, & Hosting Recommendations — Issue12 — Meligy’s AngularJS & Web Dev Goodies


For the new ones around here, this is @Meligy writing this issue of GuruStop.NET Newsletter for JavaScript developers, especially those working with AngularJS.

I’ll mix in a few quick links with the ones I describe, for a change.

Please reply back and tell me whether you think this is a good idea.

Let’s jump to today’s picks:


AngularU Videos

You probably heard about AngularU, another big Angular event like ng-europe, with speakers from within and outside the Angular team.

There is a ton about Angular 2 (roadmap, server rendering, forms, TypeScript), but also several topics about Angular 1.x for both coding techniques and libraries, and even integration with different backends.

Angular 2

Contribute to Angular 2 [“community-help” Github Label]

In an up-for-grabs way, Angular 2 repository issues now has a special label for issues that the team expects external contributors from the community might be able to work on easily.

Check the list. You might find something that you can do!

React Native and NativeScript Integration [Article]

A narration from the “AngularJS 2 Roadmap” in AngularU that gets you the news pieces directly. It also links to the Angular 2 Rendering Architecture document.

Styling Angular 2 components [Article]

Angular 1.x

gulp.js starter for AngularJS SPAs

A scaffold starter kit for Angular applications that uses gulp and bower and tries to set a few more things than folder structure (which seems nice) like fonts, etc.

Similarly, here’s another one that uses NG6: ES6 + JSPM (or Webpack).

Angular Formly [Library]

This one seems to be getting A LOT of attention. I see several people sharing it, and I hear about it in the Angular Air podcast.

Give it a look, or check this article about how to use it.

New features in AngularJS 1.4, AngularJS Meetup South London [Article]

Using Angular 1.x With ES6 and Webpack [Article]

More traps, anti-patterns and tips about AngularJS promises [Article]

Directives (Angular 1.x)

A Guide To Transclusion in AngularJS [Article]

Very good explanation of templates and, obviously, transclusion.

Using NgModelController with Custom Directives [Article]

From GuruStop.NET

Using track by correctly with Angular 1.4 select ng-options

This is a one year follow up of the most read post ever in my blog, about select element quirks in AngularJS, How to set the initial selected value of a select element.

AngularJS is not working at all, & angular.bootstrap() throws weird errors

I was getting ready for another post, bootstrapping my demo angular module manually, and I just couldn’t get Angular to work. After a bit of frustration, turned out I needed to run this after DOMContentLoaded was fired.


Nvigating the React Ecosystem [Article]

We know React is just a template / view library. What other tools and libraries are there that make building whole apps with it possible?

The pursuit of high performing, easily maintainable React apps [Article]



Useful Javascript debugging tips you didn’t know [Article]

Being able to monitor function calls in the console is nice. Also, if you didn’t know about, black boxing library scripts is VERY nice for debugging jQuery / Angular / Polymer / etc. apps.

ES2015 / ES6

In case you don’t know, the committee that releases the JavaScript standard (EcmaScript standard) decided to have version names after the year of release.

So, the official name for EcmaScript 6 is actually EcmaScript 2015.

Announcing “Exploring ES6” [New Book] [Freebie]

The book is free for online reading, and you are encouraged to buy downloadable formats to support the author.

It’s high on my reading list. This guy’s blog is a very good resource for JavaScript info.

Code School learning website has aquired the domain and put some nice free learning materials in there for starters.

5min ES6 Intro (With Babel) [Video]

Setting up an ES6 Project Using Babel and Browserify [Article]


NPM 3.0 [News]

BPM v3 is released with label “latest” and actual description “beta”. It’s going to be side by side with future v2 releases, but at least it should fix several common issues with v3.


Getting started with gulp [Article]

Good article that was updated a lot to keep up with Gulp.

Web Design

Improving Web Fonts Performance [Slides]

Bootstrap Sass Installation and Customization [Article]

Designing User Interfaces for Your Mother [Article]

Text Editors / IDEs

Visual Studio

JavaScript Editor Improvements in Visual Studio 2015 [News]

There’s some about AngularJS & requireJS support, but my most favourite is integrating JsDoc into intellisense (autocompolete).

JsDoc fairly common in documenting JS libraries, so, a lot of them will benefit greatly from it.

@Ch9 Connect(“On Demand”); [Videos]

Channel 9 has a nice new series of various length videos about Visual Studio 2015, and other related .NET, Azure, and programming language topics.

I watched a few and liked them a lot.

Visual Studio Tools for Apache Cordova – Samples and Docs [Code Samples]


Github’s Atom free / open-source text editor.

Facebook open-sources its Nuclide IDE based on GitHub’s Atom text editor [News]

Github Atom 1.0 released (And very cool video)

Let’s see how long it will take other editors based on Atom to be in sync with it!

Software Design

Martin Fowler: Monolithic apps first, microservices later [Article]

In his own words “Almost all the successful microservice stories have started with a monolith that got too big and was broken up”.

The introduction to Reactive Programming you’ve been missing [Article]

Web Hosting

Where should I host my blog (WordPress or other), if I want my own server / VPS?

One of the blog posts I wanted to write for long time actually. In short, for Windows, use SoftSys Hosting, for Linux, use DigitalOcean, and maybe check BlueHost.

I got a comment in email saying why WordPress instead of static file based blog, but that might be a topic for another post!

Misc / Fun

DebConf14: QA with Linus Torvalds (August 2014)

One of these random Youtube autoplay videos, but I found it interesting, not having heard a lot from Linus before.

What happens when you type and press enter? [Article]

How deep do you wnat to take the answer to? Send a Pull Request, it’s a Github repo :)

There’s also other variations on Quora and on StackOVerflow.

Community Casts [Videos]

A video collection website that seems to have around 100 AngularJS videos, and similar number or general JavaScript videos and for C#.

Seems like there are some people actively adding videos to it as several videos are added just hours before I checked it.

If you liked this newsletter


You might consider buying me a coffee, or two ;)

You can donate to the newsletter via Paypal.

But most importantly

You can reply to me and make this newsletter better:

  • Is the current monthly frequency OK, or should it be closer to weekly or bi-weekly?

  • Do you like the content? Do you want more AngularJS content? Or less? More JavaScript? C# / .MET?

  • If uou find a good article, video, library / tool, or anything else that can fit into this newsletter, why not reply and share the love? Thanks :) :)

Apart from that…

See you next one :)

@Meligy –– GuruStop.NET

Solution for when AngularJS is not working at all, & angular.bootstrap() throws weird errors

I was working on a small AngularJS demo today, when I found the following is not working:

As you can see that’s just an empty Angular app. I was trying in Plunker, I tried JSBin and same. I was very anxious.

Looking at the console, I saw an “undefined is not a function” error, deep in some AngularJS code, and a few other quirky errors as well about minified code (although my version of Angular wasn’t minified).

I couldn’t tell what was going on, till I did some googling, and found something worth sharing here.

Turns out the bootstrap call needed to be after the DOM content has been fully loaded, this is the “ready” jQuery event if you use it, or the “DOMContentLoaded” event in plain JavaScript.

So, to make this line work, all I needed to do is write the following:

If you are using jQuery, you could also alternatively write:

Just passing a function to jQuery will be equal to $(document).on("ready", myFunction).

Sharing this here to save someone else the confusion I had!

Where should I host my blog (WordPress or other), if I want my own server / VPS?

A friend of mine asked me the following question yesterday:

Need an advice on what is a good place to host a personal blog probably word press with custom domain.

I was very happy to see the question, but I always wanted to write a small post about my web hosting recomendations, and this is a good opportunity!

Here’s what I said to him:

The VPS Recommendations:

If you are going the VPS route, here are my personal recommendations:

Windows VPS

I always use and recommend:

SoftSys Hosting

This is THE Windows VPS hosting for me. Good performance, several locations (I host in West US as I get visitors from US and Australia), SSD VPS as an option (which I used as soon as it was announced), and great support and price.

Everyone I recommended it to thanked me afterwards.

Linux VPS

I haven’t done much in the Linux space, but these two are the big players used AND trusted by the people I follow and trust.

The both have tools to get you started and create the WordPress setup for you:

Classic VPS hosting, even shared hosting:

Blue Host
Blue Host is considered a budget hosting but some people used it for big stuff successfully.

Cloud Style Hosting, with SSD VPS:

Digital Ocean
The biggest sellers for Digital Ocean are cheap start point, SSD, and ability to resize servers.