\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{ProLoser}
\pdfinfo{
  /Title (angularjs.pdf)
  /Creator (Cheatography)
  /Author (ProLoser)
  /Subject (AngularJS Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A6120D}
\definecolor{LightBackground}{HTML}{FCF7F7}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{AngularJS Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{ProLoser} via \textcolor{DarkBackground}{\uline{cheatography.com/1600/cs/513/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}ProLoser \\
  \uline{cheatography.com/proloser} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 9th August, 2012.\\
   Updated 29th February, 2020.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Filters}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/currency"\}\}{\bf{amount | currency{\emph{{[}:symbol{]}}}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Formats a number as a currency (ie \$1,234.56).} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/date"\}\}{\bf{date | date{\emph{{[}:format{]}}}}}} \tn 
% Row Count 6 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/filter"\}\}{\bf{array | filter:expression}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Selects a subset of items from array. Expression takes {\emph{string|Object|function()}}} \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/json"\}\}{\bf{data | json}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Convert a JavaScript object into JSON string.} \tn 
% Row Count 13 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/limitTo"\}\}{\bf{array | limitTo:limit}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Creates a new array containing only a specified number of elements in an array.} \tn 
% Row Count 17 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ngSanitize/filter/linky"\}\}{\bf{text | linky}} \textasciicircum{}1\textasciicircum{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Finds links in text input and turns them into html links.} \tn 
% Row Count 21 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/lowercase"\}\}{\bf{string | lowercase}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Converts string to lowercase.} \tn 
% Row Count 24 (+ 3)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/number"\}\}{\bf{number | number{\emph{{[}:fractionSize{]}}}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Formats a number as text.  If the input is not a number an empty string is returned.} \tn 
% Row Count 29 (+ 5)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/orderBy"\}\}{\bf{array | orderBy:predicate{\emph{{[}:reverse{]}}}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Predicate is \seqsplit{function(*)|string|Array.} Reverse is boolean} \tn 
% Row Count 34 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Filters (cont)}}  \tn
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/filter/uppercase"\}\}{\bf{string | uppercase}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Converts string to uppercase.} \tn 
% Row Count 3 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{You can inject the \$filter service and do {\emph{\$filter('filterName')(value{[}, :optionalParam{]}{[}, :optionalParam{]})}} in use it in your javascript. \newline \textasciicircum{}1\textasciicircum{} Requires ngSanitize Module}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Services}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$anchorScroll}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$cacheFactory}}} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{compiledHtml = {\bf{\$compile}}(html)(scope)} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$controller}}} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$cookieStore}}} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$document}}} \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$exceptionHandler}}(exception{\emph{{[}, cause{]}}})} \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$filter}}(name)} \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$http}}{\emph{{[}(options){]}}}} \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$httpBackend}}} \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$injector}}} \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$interpolate}}(text{\emph{{[}, mustHaveExpression{]}}})} \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$locale}}} \tn 
% Row Count 13 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$location}}} \tn 
% Row Count 14 (+ 1)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$log}}} \tn 
% Row Count 15 (+ 1)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$parse}}(expression)} \tn 
% Row Count 16 (+ 1)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$provide}}} \tn 
% Row Count 17 (+ 1)
% Row 17
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$q}}} \tn 
% Row Count 18 (+ 1)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$resource}}(url{[}, paramDefaults{]}{[}, actions{]})} \tn 
% Row Count 19 (+ 1)
% Row 19
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$rootElement}}} \tn 
% Row Count 20 (+ 1)
% Row 20
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$rootScope}}} \tn 
% Row Count 21 (+ 1)
% Row 21
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$route}}} \tn 
% Row Count 22 (+ 1)
% Row 22
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$routeParams}}} \tn 
% Row Count 23 (+ 1)
% Row 23
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$routeProvider}}} \tn 
% Row Count 24 (+ 1)
% Row 24
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$sanitize}}(html)} \tn 
% Row Count 25 (+ 1)
% Row 25
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$scope}} {\emph{See \$rootScope}}} \tn 
% Row Count 26 (+ 1)
% Row 26
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$templateCache}}} \tn 
% Row Count 27 (+ 1)
% Row 27
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$timeout}}(fn{\emph{{[}, delay{]}{[}, invokeApply{]}}})} \tn 
% Row Count 28 (+ 1)
% Row 28
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$window}}} \tn 
% Row Count 29 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Directive Definition Object}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{name}} {\emph{\{string\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Name of the current scope. Optional defaults to the name at registration.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{priority}} {\emph{\{integer\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Specifies order multiple directives apply on single DOM element (higher = first)} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{terminal}} {\emph{\{true\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Current {\emph{priority}} will be last set of directives to execute} \tn 
% Row Count 9 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{scope}} {\emph{\{true | object\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}{\emph{True}} - create child scope. {\emph{Undefined|false}} - use parent scope. {\emph{\{\}}} - isolate scope (with specified attributes/scope variables passed): {\emph{@ or @attr}} - bind local model to value of DOM attribute (string), {\emph{= or =attr}} - bi-directional binding between local model and the parent scope, {\emph{\& or \&attr}} - execute an expression in context of parent. Reference attr OR assumes model of same name} \tn 
% Row Count 19 (+ 10)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{controller}} {\emph{function(\$scope, \$element, \$attrs, \$transclude)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Controller constructor function instantiated before pre-linking phase and shared with other directives if requested by name} \tn 
% Row Count 24 (+ 5)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{require}} {\emph{\{string | array{[}strings{]}\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Require another controller ({\emph{ngModel}}). Prefixes: {\bf{?}} - Don't raise error. {\bf{\textasciicircum{}}} - Look on parent elements too} \tn 
% Row Count 28 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{restrict}} {\emph{\{string: 'EACM'\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}{\bf{E - Element}}: {\emph{\textless{}my-directive /\textgreater{}}}. {\bf{A - Attribute}} (default): \textless{}div {\emph{my-directive}}="exp" /\textgreater{}. {\bf{C - Class}}: \textless{}div class="{\emph{my-directive}}: exp;" /\textgreater{}. {\bf{M - Comment}}: \textless{}!-{}- directive: {\emph{my-directive}} exp -{}-\textgreater{}} \tn 
% Row Count 34 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Directive Definition Object (cont)}}  \tn
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{template}} {\emph{\{string\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Replace current element with contents and migrates all attributes / classes} \tn 
% Row Count 3 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{templateUrl}} {\emph{\{string\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Same as {\emph{template}} but the template is loaded from the specified URL} \tn 
% Row Count 6 (+ 3)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{replace}} {\emph{\{boolean\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}{\emph{true}}: template replaces element instead of appending} \tn 
% Row Count 9 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{transclude}} {\emph{\{boolean\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Compiles contents on parent (pre-isolate) scope. Usually used with ngTransclude \& templates.} \tn 
% Row Count 12 (+ 3)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{compile}} {\emph{function(tElement, tAttrs, fn \seqsplit{transclude(function(scope}, cloneLinkingFn) ) returns link()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}For transforming the template (rare, run once per template instance).} \tn 
% Row Count 17 (+ 5)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{link}} {\emph{function(scope, iElement, iAttrs, controller)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Executed after template is cloned (run once per clone). Contains most logic (DOM listeners, etc). {\emph{Controller}} can be an array.} \tn 
% Row Count 22 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{http://docs.angularjs.org/guide/directive}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Directives}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngApp"\}\}{\bf{ng-app}}="plaintext"} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngBind"\}\}{\bf{ng-bind{[}-html-unsafe{]}}}="expression"} \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngBindTemplate"\}\}{\bf{ng-bind-template}}="string\{\{expression\}\}string\{\{expression\}\}"} \tn 
% Row Count 8 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngApp"\}\}{\bf{ng-change}}="expression"} \tn 
% Row Count 10 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngChecked"\}\}{\bf{ng-checked}}="boolean"} \tn 
% Row Count 12 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngClass"\}\}{\bf{ng-class{\emph{{[}-even|-odd{]}}}}}="string|object"} \tn 
% Row Count 15 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngClick"\}\}{\bf{ng-{\emph{{[}dbl{]}}}click}}="expression"} \tn 
% Row Count 18 (+ 3)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngCloak"\}\}{\bf{ng-cloak}}="boolean"} \tn 
% Row Count 20 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngController"\}\}{\bf{ng-controller}}="plaintext"} \tn 
% Row Count 23 (+ 3)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngCsp"\}\}\textless{}html {\bf{ng-csp}}\textgreater{} \textasciicircum{}(Content Security Policy)\textasciicircum{}} \tn 
% Row Count 26 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngDisabled"\}\}{\bf{ng-disabled}}="boolean"} \tn 
% Row Count 28 (+ 2)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngForm"\}\}\textless{}{\bf{form|ng-form}} name="plaintext"\textgreater{} | {\bf{ng-form}}="plaintext"} \tn 
% Row Count 31 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Directives (cont)}}  \tn
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngHide"\}\}{\bf{ng-hide|show}}="boolean"} \tn 
% Row Count 2 (+ 2)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngHref"\}\}{\bf{ng-href}}="plaintext\{\{string\}\}"} \tn 
% Row Count 5 (+ 3)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngInclude"\}\}{\bf{ng-include}}="string"|\textless{}{\bf{ng-include}} src="string" {\emph{onload="expression" autoscroll="expression"}}\textgreater{}} \tn 
% Row Count 9 (+ 4)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngInit"\}\}{\bf{ng-init}}="expression"} \tn 
% Row Count 11 (+ 2)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}input {\bf{ng-pattern}}="/regex/" {\bf{ng-minlength}} {\bf{ng-maxlength}} {\bf{ng-required}}} \tn 
% Row Count 13 (+ 2)
% Row 17
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngList"\}\}\textless{}input {\bf{ng-list}}="delimiter|regex"\textgreater{}} \tn 
% Row Count 16 (+ 3)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}input type="checkbox" {\bf{ng-true-value}}="plaintext" {\bf{ng-false-value}}="plaintext"\textgreater{}} \tn 
% Row Count 18 (+ 2)
% Row 19
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngModel"\}\}{\bf{ng-model}}="expression"} \tn 
% Row Count 20 (+ 2)
% Row 20
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngMousedown"\}\}{\bf{ng-mousedown}}="expression"} \tn 
% Row Count 23 (+ 3)
% Row 21
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngMouseenter"\}\}{\bf{ng-mouseenter}}="expression"} \tn 
% Row Count 26 (+ 3)
% Row 22
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngMouseleave"\}\}{\bf{ng-mouseleave}}="expression"} \tn 
% Row Count 29 (+ 3)
% Row 23
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngMousemove"\}\}{\bf{ng-mousemove}}="expression"} \tn 
% Row Count 32 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Directives (cont)}}  \tn
% Row 24
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngMouseover"\}\}{\bf{ng-mouseover}}="expression"} \tn 
% Row Count 3 (+ 3)
% Row 25
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngMouseup"\}\}{\bf{ng-mouseup}}="expression"} \tn 
% Row Count 6 (+ 3)
% Row 26
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}select {\bf{ng-multiple}}\textgreater{}} \tn 
% Row Count 7 (+ 1)
% Row 27
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngNonBindable"\}\}{\bf{ng-non-bindable}}} \tn 
% Row Count 9 (+ 2)
% Row 28
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngOptions"\}\}{\bf{ng-options}}="select{\emph{ {[}as label{]} {[}group by group{]}}} for ({\emph{{[}key,{]} }}value) in object|array"} \tn 
% Row Count 13 (+ 4)
% Row 29
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngPluralize"\}\}{\bf{ng-pluralize}}|\textless{}{\bf{ng-pluralize}} count="number" when="object" {\emph{offset="number"}}\textgreater{}} \tn 
% Row Count 17 (+ 4)
% Row 30
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngReadonly"\}\}{\bf{ng-readonly}}="expression"} \tn 
% Row Count 20 (+ 3)
% Row 31
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngRepeat"\}\}{\bf{ng-repeat}}="({\emph{{[}key,{]} }}value) in object|array"} \tn 
% Row Count 23 (+ 3)
% Row 32
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngSelected"\}\}\textless{}option {\bf{ng-selected}}="boolean"\textgreater{}} \tn 
% Row Count 26 (+ 3)
% Row 33
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngSrc"\}\}{\bf{ng-src}}="string"} \tn 
% Row Count 28 (+ 2)
% Row 34
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngStyle"\}\}{\bf{ng-style}}="string|object"} \tn 
% Row Count 30 (+ 2)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Directives (cont)}}  \tn
% Row 35
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngSubmit"\}\}{\bf{ng-submit}}="expression"} \tn 
% Row Count 2 (+ 2)
% Row 36
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngSwitch"\}\}{\bf{ng-switch}}="expression"|\textless{}{\bf{ng-switch}} on="expression"\textgreater{}} \tn 
% Row Count 5 (+ 3)
% Row 37
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{ng-switch-when}}="plaintext"} \tn 
% Row Count 6 (+ 1)
% Row 38
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{ng-switch-default}}} \tn 
% Row Count 7 (+ 1)
% Row 39
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngTransclude"\}\}{\bf{ng-transclude}} \textasciicircum{}templates\textasciicircum{}} \tn 
% Row Count 10 (+ 3)
% Row 40
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngView"\}\}{\bf{ng-view}}|\textless{}{\bf{ng-view}}\textgreater{}} \tn 
% Row Count 12 (+ 2)
% Row 41
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/directive/ngBindHtml"\}\}{\bf{ng-bind-html}}="expression"} \tn 
% Row Count 15 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bold}} means the actual directive \newline {\emph{Italics}} mean optional \newline Pipes mean either|or \newline Plaintext means no string encapsulation \newline \textasciicircum{}Superscript\textasciicircum{} means notes or context \newline \textless{}Brackets\textgreater{} mean tag comptibility \newline Lack of \textless{}brackets\textgreater{} means the attribute can apply to any tag}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Module}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#config"\}\}{\bf{config(configFn)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Use this method to register work which needs to be performed on module loading.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#constant"\}\}{\bf{constant(name, object)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Because the constant are fixed, they get applied before other provide methods.} \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#controller"\}\}{\bf{controller(name, constructor)}}} \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#directive"\}\}{\bf{directive(name, directiveFactory)}}} \tn 
% Row Count 14 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#factory"\}\}{\bf{factory(name, providerFunction)}}} \tn 
% Row Count 17 (+ 3)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#filter"\}\}{\bf{filter(name, filterFactory)}}} \tn 
% Row Count 20 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#provider"\}\}{\bf{provider(name, providerType)}}} \tn 
% Row Count 23 (+ 3)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#run"\}\}{\bf{run(initializationFn)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Use this method to register work which needs to be performed when the injector with with the current module is finished loading.} \tn 
% Row Count 28 (+ 5)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#service"\}\}{\bf{service(name, constructor)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}value(name, object)} \tn 
% Row Count 32 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Module (cont)}}  \tn
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#name"\}\}{\bf{name}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Name of the module.} \tn 
% Row Count 3 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="http://docs.angularjs.org/api/angular.Module\#requires"\}\}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Holds the list of modules which the injector will load before the current module is loaded.} \tn 
% Row Count 7 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{http://docs.angularjs.org/api/angular.Module}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Scope Properties and Methods}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$root}} or {\bf{\$rootScope}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Move to the top-most \$scope (ng-app)} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$parent}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Move to the immediate parent of the current \$scope} \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$id}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Auto generated Unique ID} \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$destroy (event)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Broadcasted when a scope and its children are being destroyed} \tn 
% Row Count 10 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$apply(exp)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Executes logic within the AngularJS context and refreshes all models checks.} \tn 
% Row Count 13 (+ 3)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$broadcast(name, args)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Dispatches an event name downwards to all child scopes} \tn 
% Row Count 16 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$destroy()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Removes the current scope (and all of its children) from the parent scope} \tn 
% Row Count 19 (+ 3)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$digest()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Process all of the watchers of the current scope and its children. Since watchers can change models, they will continue firing until all changes stop. {\bf{BEWARE OF RECURSIVE CODE}}} \tn 
% Row Count 24 (+ 5)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$emit(name, args)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Dispatches an event name upwards through the scope hierarchy} \tn 
% Row Count 27 (+ 3)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$eval(expression)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Executes the expression on the current scope and returns the result} \tn 
% Row Count 30 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Scope Properties and Methods (cont)}}  \tn
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$evalAsync(expression)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Executes the expression on the current scope at a later point in time} \tn 
% Row Count 3 (+ 3)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$new(isolate)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Creates a new child scope} \tn 
% Row Count 5 (+ 2)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$on(name, listener)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Listens on events of a given type} \tn 
% Row Count 7 (+ 2)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$watch(watchExp, listener(newVal, oldVal, scope), objectEquality)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Watch a model (exp) for changes and fires the listener callback. Pass {\emph{true}} as a third argument to watch an object's properties too.} \tn 
% Row Count 12 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{The following directives create child scopes: {\emph{ngInclude}}, {\emph{ngSwitch}}, {\emph{ngRepeat}}, {\emph{ngController}}, {\emph{uiIf}}. Calls to the same {\emph{ngController}} will create multiple instances and {\bf{do not}} share scopes. Remember to traverse up the tree to affect {\emph{primitives}} on the intended scope: {\emph{ng-click="\$parent.showPage=true"}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Global Functions}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.bind"\}\}{\bf{angular.bind(self, fn, args)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Returns a function which calls function fn bound to self (self becomes the this for fn).} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.bootstrap"\}\}{\bf{angular.bootstrap(element{\emph{{[}, modules{]})}}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Use this function to manually start up angular application.} \tn 
% Row Count 10 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.copy"\}\}{\bf{angular.copy(source{\emph{{[}, destination{]})}}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Creates a deep copy of source, which should be an object or an array.} \tn 
% Row Count 15 (+ 5)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.element"\}\}{\bf{angular.element(element)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Wraps a raw DOM element or HTML string as a jQuery element.} \tn 
% Row Count 20 (+ 5)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.equals"\}\}{\bf{angular.equals(o1, o2)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if two objects or two values are equivalent.} \tn 
% Row Count 25 (+ 5)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.extend"\}\}{\bf{angular.extend(dst, src)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Extends the destination object dst by copying all of the properties from the src object(s) to dst.} \tn 
% Row Count 31 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Global Functions (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.forEach"\}\}{\bf{angular.forEach(obj, iterator{\emph{{[}, context{]})}}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Invokes the iterator function once for each item in obj collection, which can be either an object or an array.} \tn 
% Row Count 6 (+ 6)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.fromJson"\}\}{\bf{angular.fromJson(json)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Deserializes a JSON string.} \tn 
% Row Count 10 (+ 4)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.identity"\}\}{\bf{angular.identity()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}A function that returns its first argument. This function is useful when writing code in the functional style.} \tn 
% Row Count 16 (+ 6)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.injector"\}\}{\bf{angular.injector(modules)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Creates an injector function that can be used for retrieving services as well as for dependency injection.} \tn 
% Row Count 22 (+ 6)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isArray"\}\}{\bf{angular.isArray(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a reference is an Array.} \tn 
% Row Count 26 (+ 4)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isDate"\}\}{\bf{angular.isDate(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a value is a date.} \tn 
% Row Count 30 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Global Functions (cont)}}  \tn
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isDefined"\}\}{\bf{angular.isDefined(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a reference is defined.} \tn 
% Row Count 4 (+ 4)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isElement"\}\}{\bf{angular.isElement(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a reference is a DOM element (or wrapped jQuery element).} \tn 
% Row Count 9 (+ 5)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isFunction"\}\}{\bf{angular.isFunction(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a reference is a Function.} \tn 
% Row Count 13 (+ 4)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isNumber"\}\}{\bf{angular.isNumber(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a reference is a Number.} \tn 
% Row Count 17 (+ 4)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isObject"\}\}{\bf{angular.isObject(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a reference is an Object. Unlike typeof in JavaScript, nulls are not considered to be objects.} \tn 
% Row Count 23 (+ 6)
% Row 17
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isString"\}\}{\bf{angular.isString(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a reference is a String.} \tn 
% Row Count 27 (+ 4)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.isUndefined"\}\}{\bf{angular.isUndefined(value)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Determines if a reference is undefined.} \tn 
% Row Count 31 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Global Functions (cont)}}  \tn
% Row 19
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.lowercase"\}\}{\bf{angular.lowercase(string)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Converts the specified string to lowercase.} \tn 
% Row Count 4 (+ 4)
% Row 20
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.mock"\}\}{\bf{angular.mock}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Namespace from 'angular-mocks.js' which contains testing related code.} \tn 
% Row Count 8 (+ 4)
% Row 21
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.module"\}\}{\bf{angular.module(name{\emph{{[}, requires{]}}}, configFn)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The angular.module is a global place for creating and registering Angular modules. Requires argument always creates a new module.} \tn 
% Row Count 14 (+ 6)
% Row 22
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.noop"\}\}{\bf{angular.noop()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}A function that performs no operations.} \tn 
% Row Count 17 (+ 3)
% Row 23
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.toJson"\}\}{\bf{angular.toJson(obj{\emph{{[}, pretty{]}}})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Serializes input into a JSON-formatted string.} \tn 
% Row Count 21 (+ 4)
% Row 24
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.uppercase"\}\}{\bf{angular.uppercase(string)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Converts the specified string to uppercase.} \tn 
% Row Count 25 (+ 4)
% Row 25
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/function/angular.version"\}\}{\bf{angular.version}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}An object that contains information about the current AngularJS version.} \tn 
% Row Count 29 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{FormController}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/type/form.FormController\#\$pristine"\}\}\$pristine} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/type/form.FormController\#\$dirty"\}\}\$dirty} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/type/form.FormController\#\$valid"\}\}\$valid} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/type/form.FormController\#\$invalid"\}\}\$invalid} \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{noshy\}\}\{\{popup="https://docs.angularjs.org/api/ng/type/form.FormController\#\$error"\}\}\$error} \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{http://docs.angularjs.org/api/ng.directive:form.FormController}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.09494 cm} x{3.88206 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{NgModelController}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{\$render()} & Called when the view needs to be updated. It is expected that the user of the ng-model directive will implement this method. \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{\$setValidity(validationErrorKey}, isValid)} \tn 
% Row Count 5 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\$setViewValue(value)} \tn 
% Row Count 6 (+ 1)
% Row 3
\SetRowColor{white}
\seqsplit{\$viewValue} & mixed \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{\$modelValue} & mixed \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
\seqsplit{\$parsers} & array of function after reading val from DOM to sanitize / convert / validate the value \tn 
% Row Count 13 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{\$formatters} & array of functions to convert / validate the value \tn 
% Row Count 15 (+ 2)
% Row 7
\SetRowColor{white}
\$error & object \tn 
% Row Count 16 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{\$pristine} & boolean \tn 
% Row Count 18 (+ 2)
% Row 9
\SetRowColor{white}
\$dirty & boolean \tn 
% Row Count 19 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\$valid & boolean \tn 
% Row Count 20 (+ 1)
% Row 11
\SetRowColor{white}
\seqsplit{\$invalid} & boolean \tn 
% Row Count 21 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Deferred and Promise}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$q.all({\emph{{[}array of promises{]}}})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Creates a Deferred object which represents a task which will finish in the future.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$q. defer()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Creates a Deferred object which represents a task which will finish in the future.} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$q.reject({\emph{reason}})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Creates a promise that is resolved as rejected with the specified reason} \tn 
% Row Count 9 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\$q.when({\emph{value}})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Wraps an object that might be a value or a (3rd party) then-able promise into a \$q promise} \tn 
% Row Count 12 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Deferred.resolve({\emph{value}})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Resolves the derived promise with the value} \tn 
% Row Count 14 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Deferred.reject({\emph{reason}})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Rejects the derived promise with the reason} \tn 
% Row Count 16 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Deferred.promise}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Promise object associated with this deferred} \tn 
% Row Count 18 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Promise.then(successCallback, errorCallback)}}} \tn 
% Row Count 19 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{http://docs.angularjs.org/api/ng.\$q}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}