Angular and $cookies - $cookies.get is not a function

Problem

I'm trying to use cookies within Angular - here's what I'm trying:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-cookies.min.js"></script>

var capApp = angular.module('capApp', ['ngRoute','ui.bootstrap','ngCookies']);

capApp.controller('cookieCtrl', ['$scope','$cookies', function($scope, $cookies) {
  var favoriteCookie = $cookies.get('user_id');
  alert(favoriteCookie);
}]);

I get this error in the console:

TypeError: $cookies.get is not a function

Any ideas where I'm going wrong?

UPDATE

Check which version of Angular you are using for everything - any Angular guys read this, make the version switch in the docs bright green and huge! You simply don't notice it.

Problem courtesy of: Darren Sweeney

Solution

In Angular 1.3.14 you can just use

var favoriteCookie = $cookies[user_id];

See the documentaiton here: Angular Cookies

Solution courtesy of: Rias

Discussion

The following method should work.

var favoriteCookie = $cookies.user_id;
Discussion courtesy of: cilerler

The syntax you have is for version 1.4.x but you are referencing an older version. If you do not want to update to 1.4.x, you can use $cookieStore instead as follows:

$cookieStore.put("key", "value"); 
var value = $cookieStore.get("key");

Alternatively if you are using version 1.3.x or below, you can use $cookies as follows:

$cookies.key = "value";
var value = $cookies.key; 
Discussion courtesy of: Maksood

This recipe can be found in it's original form on Stack Over Flow.